Svelte/animate breaks page render on outgoing page with a large store update

[jakobrosenberg]

Describe the bug
If an outgoing page has a tag with out:send={{ key }} and the incoming page has aStore.update(store => store) in the main script while the store is fairly large, the outgoing page will become part of the layout.

Logs
No errors or warnings are shown.

To Reproduce
git clone
https://github.com/jakobrosenberg/svelte-store-animate-bug

Expected behavior
Pages should display normally

Information about your Sapper Installation:

• Your browser and the version: Chrome Version 76.0.3809.132

• Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc)
  Windows 10 x64

• Your hosting environment: (i.e. Local, GCP, AWS, Now, etc...)
  Local

• Sapper version (Please check you can reproduce the issue with the latest release!)
  0.27.8

• Svelte version (Please check you can reproduce the issue with the latest release!)
  3.12.1

• Whether your application uses Webpack or Rollup
  Rollup

Severity
Rare, but severe
I spent half a day tearing my app apart to find the cause of corrupted page renders.

[jakobrosenberg]

Closing in favor of sveltejs/svelte#3685 as this bug isn't related to Sapper.

[thienpow]

should not close... as this happen only in Sapper... bcos it won't happen in Svelte SPA mode...
this bug is particularly when using out:send with the duration set higher than 100ms then it will have higher chance to break and stuck the incoming page at the bottom of existing page, if want to reproduce the page stuck on every test, can set the duration to higher than 1000ms then, it will surely stuck. currently i give up /removed all "out:send" to have a more stable app...