Search code examples
htmlnode.jsserver-side-renderingsveltesapper

Sapper loading pages underneath each other

I have a sapper/svelte app that when I navigate from my profile page to another page (let's say home) the home page loads underneath the profile page for a split second. Then loads normally.

Before clicking to go home:

enter image description here

After clicking home page link: enter image description here

This is crazy to me and I have no idea whats going on??

After a split second, the profile page disappears and the home page displays correctly.

Solution

  • One explanation could be that you use transitions on the pages’ outer elements.

    When using, for example, the fade transition provided by Svelte, elements that are fading in and out at the same time (e .g. in order to replace each other) will both be visible for the duration of the transition.

    To avoid this behavior, you need to add a delay on the element that is fading in, corresponding to the duration of the fade out transition. This will cause the new element to only be visible when the old element has already been removed from the DOM.

    As an example:

    <main in:fade={{ delay: 100, duration: 100 }} out:fade={{ duration: 100}}>

    Please see the Svelte docs for more information on transition parameters.