Subscribing to `$page` in layout and using `transition` causes page to not be cleared on navigation

[Fish1]

Describe the bug

Having a route with $page access in the layout, and the use of a transition on the page, causes the page to not be cleared on navigation.

Video.webm

Reproduction

In this file structure we have a / page and a /app page. The /app page has a layout which accesses the $page store, while the page itself has a transition on an element.

The / page is juat a button to the /app page.

/app +layout.svelte

<script lang="ts">
    import { page } from '$app/stores';
    // this $page results in the page not being removed after navigation
    $page;
</script>

<slot />

/app +page.svelte

<script>
  import { fade } from "svelte/transition";
</script>

<div>
    <h2>APP PAGE</h2>
    <a href="/">Goto Home</a>
    <!-- this transition results in the page not being removed after navigation -->
    <div transition:fade>This uses transition</div>
</div>

/ +page.svelte

<div>
    <h1>HOME PAGE</h1>
    <a href="/app">GoTo Problem</a>
</div>

Repo: https://github.com/Fish1/sveltekit-bug

Logs

I don't see sveltekit producing any error logs.

System Info

System:
    OS: Linux 5.15 openSUSE Tumbleweed 20230302
    CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
    Memory: 9.76 GB / 15.57 GB
    Container: Yes
    Shell: 3.6.0 - /usr/bin/fish
  Binaries:
    Node: 18.13.0 - ~/.local/share/nvm/v18.13.0/bin/node
    Yarn: 1.22.19 - ~/.local/share/nvm/v18.13.0/bin/yarn
    npm: 8.19.3 - ~/.local/share/nvm/v18.13.0/bin/npm
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.0.0 
    @sveltejs/adapter-node: ^1.2.1 => 1.2.1 
    @sveltejs/kit: ^1.5.0 => 1.10.0 
    svelte: ^3.54.0 => 3.55.1 
    vite: ^4.0.0 => 4.1.4

Severity

serious, but I can work around it

Additional Information

No response

[Fish1]

The easiest fix for this, is to avoid the $page syntax, and instead use get(page)

<script lang="ts">
    import { page } from '$app/stores';
    import { get } from 'svelte/store';
    console.log(get(page).url.hostname)
</script>

<slot />

[teemingc]

Conditions for occurring:

• subscribing to $page store in a +layout.svelte file.
• using the transition directive in a layout / page / component.
• the layout unmounts while the transition occurs.

Appending |local to transition does not fix it (where it usually does for most transition bugs)

[teemingc]

Similar to #7405 . Should I close in favour of that issue?
The core of the issue is explained here #7405 (comment)

[Fish1]

Another fix for the issue.

Putting the slot inside of a div, or some other element appears to fix it. Maybe this is pointing towards it being an issue with svelte itself, and not sveltekit?

<script lang="ts">
    import { page } from '$app/stores';
    $page;
</script>

<div>
    <slot />
</div>

[jrmoynihan]

I'm seeing the same behavior. I have a slotted component with a transition in a layout component:

+layout.svelte

<SlotContainer>
   {#if $page.url.href.includes("special")}
      <SlottedComponent />  // there's a transition within this component
   {/if}
</SlotContainer>

Wrapping the slot with a <div> had no effect, nor did altering how I reference the $page store import.

[jrmoynihan]

@s3812497 @Fish1
This is the correct behavior, per #7877. The $page store doesn't update until after the navigation is complete. My solution for this was to simply use the afterNavigate() lifecycle hook:

// +layout.svelte

<script>
   import { afterNavigate } from '$app/navigation'

   let should_show = false

  afterNavigate(async (nav) => {
      const { from, to } = nav;
      should_show = to.url.href.includes('/special-address');
  });
</script>

<SlotContainer>
    {#if should_show}
        <SlottedComponent />
    {/if}
</SlotContainer>

[teemingc]

Closing this as it is no longer reproducible on the latest version of Svelte and SvelteKit