Thread by @lzsthw

I have a couple of new gotchas for people doing Svelte:

1. fade:out, or almost any "out" transition effect is death. Avoid at all costs.

2. {#await} on a promise is great, but if you update the promise it reloads the *entire* DOM at that point. Put it into a component.

For #1, the demo involves this fade:out on the Spinner I use to show the video is loading. Seems harmless *until* you want to transition to an entire new page/component, say with svelte-spa-router.

You can see it happen here. I click the link for a related video, and you can see the current video has to "fade out", preventing that page from leaving the DOM, so it looks like both pages load at the same time. I'm at a point now where I don't use *any* out transitions.

Once you remove the fade:out from everything it works flawlessly. I consider this a bug, just not sure where. I think Svelte needs a way to say "stop all transitions NAO!" so svelte-spa-router can use it.

For #2 the demo is in how, when I click on a related video it looks like the *entire* list of videos is first reset to an empty array, then filled. This causes the whole DOM tree at that point to go away, flash, then come back. What's supposed to happen is it should diff the DOM.

The cause is this little svelte-spa-router hack on lines 10-12 that I needed in a page to make links work as expected. For bizarre reasons svelte-spa-router only considers links to *different* route components as a new link, so it doesn't run onMount. Those lines fix it.

BUT, this is not a svelte-spa-router page that I've put into client/routes.js. It is a separate component that I'm using *inside* those routes anywhere I need related videos. That means these lines aren't needed, and are just causing extra DOM work. Remove them and it's fixed.

See how now the list of related videos doesn't flash, go away come back, or reload images? Look at the top right and you can see how, when I pick a video from a new series, *those* videos do change though. That's the correct behavior.

There ya go. If you have a situation where it looks like one component is sticking around after another has loaded, look for out transitions. They hold things up.

If you have aggressive DOM tree replacement, look for over using $: and await/promises, and remove them.

Finally, I find a lot of problems go away when you move things into components. It seems like Svelte is better at working the DOM when the DOM is composed of a few big components rather than one giant page. What I do is make the page so it looks right, then break it up.