In my SvelteKit project, I have a layout that should display all pages next to each other horizontally, but they all are 100vw wide, so only one is shown “within” the screen at a time (the other ones are to the left/right of the screen), and when navigating from one page to another, they should all nicely slide sideways, so the page you navigate to gets shown centered on the screen. Here is a quick demo in a Svelte project that shows how I want it to work.

However, I want to implement this in a SvelteKit project, where I can’t load the content of all pages in advance. Instead, the current page content is loaded using <slot /> in a +layout.svelte file, and my workaround for the other pages is to display some dummy text. Here is a quick demo in another Svelte project that reflects that.

This works good enough, but it would be nice if the current page kept its content when one navigates away from it, instead of immediately changing its content to the dummy text.

My question is: can I somehow keep the old content from a <slot /> loaded for a few seconds before it disappears?

Here is what the SvelteKit code in my +layout.svelte file currently looks like:

<div class="pages" style:--shownPageIndex={shownPageIndex}>

    {#each mainPages as mainPage, pageIndex (mainPage.name)}

        <div class="page" style:--pageIndex={pageIndex}>

            {#if isUrlLeadingToMainPage($page.url.pathname, mainPage)}
                <h1>{mainPage.name}</h1>
                
                <!--
                     The problem is here. When going to another page, the condition
                     in this #if becomes false, so the <slot /> below is immediately
                     removed, and the :else-part is shown instead. I want to delay this
                     for 1 second. But for the page I'm coming to, the change should
                     happen immediately. 
                -->
                <slot />
                
            {:else}

                <div class="fakedPageContent">
                    <h1>{mainPage.name}</h1>
                    <p>This is the faked content...</p>
                </div>

            {/if}

        </div>

    {/each}

</div>