onDestroy not called after goto

[daveychu]

Describe the bug

onDestroy not called if the template has a transition based on a store variable that gets assigned to after calling goto.

In our real scenario it was caused by a programming error, but the cause was hard to track down because of multiple layers of derivations. Not sure if there's ever a valid reason for this situation, but confusing if you make the same mistake.

Reproduction

1. Clone https://github.com/daveychu/sveltekit-ondestroy-not-called-after-goto
2. npm run dev -- --open
3. Click "Go to page 2"
4. "pages pile up one after the other on the bottom as I continue navigating back and forth, with no page ever disappearing" if you continuously press the most bottom button -> New page of different layout loaded and displayed before out animation is finished #4772 (comment)

Expected: Only shows page 2
Actual: Shows both pages (or more if you keep going) and a transition on page 1

Logs

No response

System Info

System:
  OS: macOS 12.4
  CPU: (10) arm64 Apple M1 Pro
  Memory: 296.48 MB / 16.00 GB
  Shell: 5.8.1 - /bin/zsh
Binaries:
  Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
  npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
Browsers:
  Chrome: 103.0.5060.114
  Safari: 15.5
npmPackages:
  svelte: ^3.44.0 => 3.49.0

Severity

annoyance

Additional Information

No response

[fernandolguevara]

@daveychu a workaround, use the $navigating store to stop the animation and detach the node

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

{#if !$navigating && $store.show}
  <p transition:fly={{ y: 100, duration: 2000 }}>Peekaboo!</p>
{/if}

[Robak08]

@daveychu I think You can try local transitions as well. These used to work back in Sapper times.

{#if $store.show}
  <p transition:fly|local={{ y: 100, duration: 2000 }}>Peekaboo!</p>
{/if}

[dummdidumm]

I believe this is a Svelte core issue, and I vaguely remember having commented on a similar issue about a minimum reproducible independent of SvelteKit, but I can't find it right now

[peterpeterparker]

We hit this in multiple routes now. Did not tried to reproduce it in a sample repo (I should/will try when got a bit of time) but I noticed two following things:

1. it happens only with prod build. in local development it's all fine
2. we are lazy loading manually some components there not sure if it can be linked

Above workaround, {#if $navigating}...., work for us too.

[austerj]

I ran into this issue when breaking out of layout groups with global transitions. Open popovers and sometimes entire pages would stick around and stack after navigating to routes in another group.

A silly workaround I found for it was to add a group: 'groupName' prop in the corresponding (groupName)/+layout.ts load function and wrap the entire (groupName)/+layout.svelte content in {#if $page.data.group === 'groupName'}...{/if}.

This seems to force the "clean-up" of the initial layout when navigating to a route in another layout group.