AppShell is not re-rendering when $page from "$app/stores" changes

[Angel-Ponce]

What package has an issue

@svelteuidev/core

A clear and concise description of what the bug is

Simple example:

<script>
    import { page } from "$app/stores"
</script>

{$page.route.id} <<<<---- this line change when route change

<AppShell>
 <Header zIndex={101} slot="header" height={60} fixed>
  your header content
  {$page.route.id} <<<---- this line is not changing when route change
 </Header>
 <Navbar
 hiddenBreakpoint={'sm'}
 slot="navbar"
 fixed
 >
  your navbar content
 </Navbar>
 <ShellSection grow>
  <slot />
 </ShellSection>
</AppShell>

In which browser(s) did the problem occur?

No response

Steps To Reproduce

1. Import page from "$app/stores"
2. Use the following property of page : $page.route.id inside <AppShell /> (Preffer use inside <Header /> or <Navbar /> sections)
3. Make two differents routes
4. Navigate between both routes
5. The $page.route.id will not change in

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Relevant Assets

bug.mp4

(Watch the behaviour of the red and green boxes when the route changes)

[Angel-Ponce]

!Update
I found a temporal fix to ignore this problem:

Use the following svelte directive:

{#key $page.url.pathname} <--- using the `key` directive to fix the bad behaviour with `AppShell`
    <AppShell>
            <Header zIndex={101} slot="header" height={60} fixed>
             ...
     </AppShell>
{/key}

[notramo]

This workaround throws away the advantages of SvelteKit client-side routing, causing the layout to be re-rendered.

[Angel-Ponce]

Yep, but it's only a work around if you need to use this feature with the router.