Pages never unmount if there's an active transition

[oodavid]

Describe the bug

As-per title. When there's an element with non-local transition, various components NEVER unmount.

Videos

https://www.loom.com/share/4974d9bf015c465980a72e802d079597 - up-to-date replicated issue, minimal code
https://www.loom.com/share/0caafce51bff49c6907930637875dfd9 - original issue

Reproduction

https://github.com/oodavid/sveltekit-unmount-transitions

Logs

No response

System Info

System:
    OS: macOS 12.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 47.97 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
  Browsers:
    Chrome: 109.0.5414.87
    Edge: 109.0.1518.61
    Firefox: 105.0.1
    Safari: 15.4
  npmPackages:
    @sveltejs/adapter-auto: ^1.0.0 => 1.0.2 
    @sveltejs/kit: ^1.0.0 => 1.2.3 
    svelte: ^3.54.0 => 3.55.1 
    vite: ^4.0.0 => 4.0.4

Severity

annoyance

Additional Information

Related issues:

#5321
#628
#6686 (part of the Svelte 4 Milestone)

[azidn1nja]

I encountered this error aswell, seems that when the page destroy functionality runs, the transition trigger gets stuck on a seemingly empty run loop until it gets cancelled and the page is never destroyed.

[hf02]

I was having this same issue, and I've found that it's caused by an out transition and a writable that updates as soon as the page changes. That's what the $page in your repo was doing.

For example, here's a StackBlitz link that instead uses a writable that updates every frame. The same issue occurs.