We Keep Coding

sveltekit adds new page on top of old one

I just got a really unexpected bug in my sveltekit application and I can't find anything online talking about it
I have a normal sveltekit application but instead of hydrating the new code when navigating to a new page, it just adds the new code on top of the old one, when i refresh the page it removes the old code (from the previous page)
Edit: after a little bit more exploring I realized it only happens on one page, what part of my code could make this happen?

I had the same issue when having a page loading indicator on SvelteKit for internal navigating. Any page DOM modification, to display the loading indicator during the page navigating, caused the paged appearing twice error. The workaround was to not modify the page during the navigating and use only CSS to display, animate and hide the loading indicator.
Here is my loading indicator code and Here is my documentation regarding the issue. I am not sure if this an internal bug in SvelteKit, so I did not file any bug reports, as I do not have a clean repeatable example. You can also see the fixed page loading indicator on the action on this page if you click any of the blockchains.
<script>
/**
* Svelte does not give a load indication if you hit a link that leads to a page with slow load() function.
* Svelte uses internal router, not server-side loading.
* Thus, we need to manually give some indication in the user interface if the loading takes more than a blink of an eye.
*
* The component is originally made for https://tradingstrategy.ai
*
* Based on the original implementation https://github.com/shajidhasan/sveltekit-page-progress-demo by Shajid Hasan.
*
* As this component is absolutely position, you can put it at any part of your __layout.svelte.
*/
import { onDestroy, onMount } from 'svelte';
import { writable } from 'svelte/store';
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
const navigationState = writable();
const progress = tweened(0, {
duration: 3500,
easing: cubicOut
});
const unsubscribe = navigationState.subscribe((state) => {
// You will always get state=undefined
// event on the server-side rendering, so
// safely ignore it
//console.log("The loading state is", state);
if (state === 'loading-with-progress-bar') {
progress.set(0, { duration: 0 });
progress.set(0.8, { duration: 5000 });
} else if (state === 'loaded') {
progress.set(1, { duration: 1000 });
}
});
onMount(() => {
// progress.set(0.7);
});
onDestroy(() => {
unsubscribe();
});
</script>
<!-- See the (little) documentation of special SvelteKit events here https://kit.svelte.dev/docs#events -->
<svelte:window
on:sveltekit:navigation-start={() => {
// If the page loads fast enough in the preloading state,
// never display the progress bar
$navigationState = 'preloading';
// Delay the progress bar to become visible an eyeblink... only show if the page load takes too long
setTimeout(function() {
// After 250ms switch preloading to loading-with-progress-bar
if($navigationState === 'preloading') {
$navigationState = 'loading-with-progress-bar';
}
}, 500);
}}
on:sveltekit:navigation-end={() => {
$navigationState = 'loaded';
}}
/>
<!--
Make sure the container component is always in the DOM structure.
If we make changes to the page structure during the navigation, we get a page double render error:
https://stackoverflow.com/questions/70051025/sveltekit-adds-new-page-on-top-of-old-one
Not sure if this is a bug or a feature.
Thus, make sure any progress animation is done using CSS only.
-->
<div class="page-progress-bar" class:loaded={$navigationState === 'loaded'} class:preloading={$navigationState === 'preloading'} class:loading={$navigationState === 'loading-with-progress-bar'}>
<div class="progress-sliver" style={`--width: ${$progress * 100}%`} />
</div>
<style>
/* Always stay fixed at the top, but stay transparent if no activity is going on */
.page-progress-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 0.5rem;
background: transparent;
z-index: 100;
opacity: 0;
transition: opacity 0.5s;
}
/* After transitioning from preloading to loading state, make the progress bar visible with CSS transition on opacity */
.page-progress-bar.loading {
opacity: 1;
transition: opacity 0.5s;
}
.progress-sliver {
width: var(--width);
background-color: var(--price-up-green);
height: 100%;
}
</style>

I also saw this issue with the transition directive. The new page loads while the exit animation is playing. I used local transitions to solve this.
https://svelte.dev/tutorial/local-transitions

How to use window.postmessage to communicate with parent window

I'm creating a react app that I want my users to embed on their websites. This app will be shown in two iframes but I want to only show one iframe at a time. So one part of the app would be a simple button, the second would be a form that pops up once a user has decided to use the app (it's a chat app.)
I have set up a very simple component that displays the button so that it can send a message to the parent website. I'm not sure what I'm doing wrong but when the window.postmessage event is sent, I get the error:
Uncaught DOMException: Blocked a frame with origin "http://localhost:3002" from accessing a cross-origin frame.
Here is the example parent website code:
<h1>Hello! This is some static content</h1>
<iframe src="http://localhost:3002"
style="width: 108px; height: 50px; padding: 0px; margin: 10px 20px; position: fixed; bottom: 0px; right: 0px; overflow: visible; opacity: 1; border: 0px; z-index: 999998; transition-duration: 250ms; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-property: opacity, top, bottom;"
id="dbhchat"></iframe>
<h3>Thanks for checking out my blog!</h3>
<script>
window.addEventListener('message', event => {
// IMPORTANT: check the origin of the data!
if (event.origin.startsWith('http://localhost:3002')) {
// The data was sent from your site.
// Data sent with postMessage is stored in event.data:
console.log(event.data);
} else {
// The data was NOT sent from your site!
// Be careful! Do not use it. This else branch is
// here just for clarity, you usually shouldn't need it.
return;
}
});
</script>
and my component that sends the message to the parent window:
import React from 'react';
import { IconButton } from '#material-ui/core';
import PhotoCamera from '#material-ui/icons/PhotoCamera';
import './App.css';
function App() {
const send = () => {
if (window && window.parent) {
console.log('we have message sending here', window.parent);
window.parent.postMessage('message', 'http://localhost:3002', false);
}
}
return (
<div className="App">
<header style={{ background: 'red' }} className="App-header">
<IconButton onClick={send} color="primary" aria-label="upload picture" component="span">
<PhotoCamera />
</IconButton>
</header>
</div>
);
}
export default App;
Thanks in advance for any help figuring this out!

I found a bit of a quirky solution to the problem. I don't really know why this works but simply adding e.preventDefault() to the react send function worked fine after that.
const send = (e) => {
e.preventDefault();
if (window && window.parent) {
window.parent.postMessage({message: 'The message is being set up here', hide: 'dbhchat', show: 'dbhchat'}, '*');
}
}
after adding that, all worked fine. If anyone can provide more details as to why that'd be great!

How to read size and move hidden element before Vue transition starts on it?

How to read dimensions and move a div that is hidden before Vue transition starts? For example, a user clicks a button and I want to move a hidden div to appear under the button with a fade-in transition. I need to be able to both read the dimensions and move the top/left position of the hidden div before the transition starts.
Let's say I'm using v-show="active" on the div, where active is my reactive data property I want to set to true and be able to move the div before transition starts.
I've tried all these:
Move the div first, then on nextTick set active = true.
Use the javascript hook beforeEnter to try to move the div before transitions start.
Use the javascript hook enter (and 'done' callback) to try to move the div before transition starts.
Tried all the above with updating the DOM immediately with the new position before setting active = true. (In other words, not via data binding, but actually setting element style properties directly like this.$refs.content.style.top = '500px' to avoid any waiting on the virtual DOM.) However, ideally I would like to accomplish this without directly touching the DOM, but using nextTicks instead. Both approaches fail.
Tried with some success with a hacky transition: all .8ms ease-in, top 1ms, left 1ms.
Tried with success with moving the div first then setting active in a setTimeout. This is not the right solution though.
Update
Thanks to the accepted answer I was able to see that I can read dimensions on nextTick (by which time v-show has turned on display). However, it turns out I needed the transition to be all transition all .3s and that would cause the movement to be included. The DOM will gather up all the changes and apply them together, which means they get lumped into the transition that is later added by Vue. The solution ended up being that I needed to make the movements, then trigger the DOM to repaint first, then trigger the v-show to turn on. Here's an example method:
startTransition () {
this.$refs.content.offsetHeight // <-- Force DOM to repaint first.
this.isContentActive = true // <-- Turns on v-show.
},

Use v-bind:style to move your window and it all works as intended.
Update: To check the size of the popup itself, it has to be shown, so I'm using v-show instead of v-if. The first thing I do is make it visible; on the next tick, I can measure it and place it.
new Vue({
el: '.container',
data: {
top: 0,
left: 0,
width: 0,
show: false
},
methods: {
showFloater: function(evt) {
const t = evt.target;
this.show = true;
Vue.nextTick(() => {
const fEl = this.$el.querySelector('.floating');
this.top = t.offsetTop + 30;
this.left = t.offsetLeft;
this.width = fEl.offsetWidth;
setTimeout(() => this.show = false, 1000);
});
}
}
});
.container {
position: relative;
}
.floating {
border: thin solid black;
padding: 3em;
position: absolute;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
opacity: 0
}
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<div class="container">
<button #click="showFloater">Could go here</button>
<button #click="showFloater">Or here</button>
<transition name="fade">
<div v-show="show" class="floating" v-bind:style="{
top: top + 'px',
left: left + 'px'
}">
This window is {{width}}px wide.
</div>
</transition>
</div>

MVC3 .net issue to show loading image when page loads

I'm pretty new to the MVC3 .net programming & recently in one of my internal projects I'm trying to implement a functinality where to display a loading image while the page is being loaded. (using jquery function calls.)
Issue:
If i browse the default URL as we define in the route mapping. The image is not getting loaded but i can see all the styles getting populated on the page. But if i navigate to same page using the hyper link defined on the webpage the image is getting loaded as expected. I'm not sure what I'm missing here. It is same case for jquery load & jquery-ajax request/response functions (default navigation is not working while the hyperlink navigation is working).
Links:
http://testserver/sitename --> this link uses default route where the image is not loading.
http://testserver/sitename/ --> this is a hyper link on the webpage defined as below where the image is loading as expected.
#Html.ActionLink("menu_item_1", "Index", "Home", null, new {#class = "menu"})
Both links are calling the same controller & redirecting to index view page.
Code:
<style type="text/css">
#loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('content/themes/base/images/preloader_8.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;
}
</style>
<script src="#Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function () {
$("#loader").fadeOut("slow");
});
$(document).ready(function () {
$(document).ajaxStart(function () {
$("#loader").show();
}).ajaxStop(function () {
$("#loader").hide();
});
});
</script>
And I have following tag defined in the body of index/home page,
<div id="loader"></div>
route mapping in my config file: (I don't think there is an issue here, because i can see the transparency style but not the defined image(preloader_8.gif).)
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/", // URL with parameters
new { controller = "Home", action = "Index"} // Parameter defaults
);
}

How can I change the background color of a Leaflet popup?

I'm creating a map using Leafletjs, and I'd like to change the background color of a popup (which is currently displaying and image and a link) from white to a different color. It seems that basic background color css syntax won't cut it. Any advice?
Thanks,
-Scott

After you call leaflet.css, you can include a <style> tag with the following rule to change the color of the popup and popup tip.
.leaflet-popup-content-wrapper, .leaflet-popup.tip {
background-color: #000
}
Here's a screenshot I took after I edited background-color of a popup on Leaflet's homepage. Let me know if you have any more questions. Cheers.

Open leaflet.css and search for:
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: rgb(111, 51, 51);
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
Then change the background value to whatever color you want.

const marker = new L.marker(lastPoint, {
icon: markerIconSnake
}).bindPopup(getDataInHtml(dataPopup), {
className: 'stylePopup'
})
If you want to change the background color of a popup you can use the method .bindPopup (in your marker) and add a css class.
.stylePopup .leaflet-popup-content-wrapper,
.stylePopup .leaflet-popup-tip {
background-color: #f4913b;
padding: 8px;
}
If you wanna know more head to the docs!

In my case I'm using react-leaflet v2 and wasn't able to use css in js with material/core/styles. I created a function
const updatePopupCss = (color) => {
let popupElement = document.getElementsByClassName("leaflet-popup-content-wrapper");
let htmlPopupElement;
if (popupElement[0] instanceof HTMLElement) {
htmlPopupElement = popupElement[0] as HTMLElement;
htmlPopupElement.style.backgroundColor = color;
console.log(htmlPopupElement)
}
}
Then called it from the onOpen attribute like so
<Popup onOpen={() => {updatePopupCss("#036597")}} >