onDestroy not called after goto

daveychu commented 2 years ago

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

Clone https://github.com/daveychu/sveltekit-ondestroy-not-called-after-goto
npm run dev -- --open
Click "Go to page 2"
"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 -> https://github.com/sveltejs/kit/issues/4772#issuecomment-1126604199

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 commented 2 years ago

@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 commented 2 years ago

@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 commented 1 year ago

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 commented 1 year ago

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:

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

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

austerj commented 10 months ago

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.

sveltejs / kit