Description
Describe the problem
Outro transitions are great, but sometimes they are also "in the way". There can be cases (for example at a frontend router component) where it is very undesirable if a component that gets replaced with something else still stays around for a while because one of its descendants has an outro transition. In the router example, this can result in situations where for a short amount of time two pages are rendered at once (spectacularily breaking the layout) because some accordion, tooltip or whatever deep inside the old page stalled the destruction of the page's view component for half a second to show its outro. Even if the "two pages at once" issue was not the a problem, by showing the new page only after outroend
, we'd still be forced to wait for some descendant if it has an outro.
I know that local
exists, but that's not a real solution to this problem, for two reasons: Firstly, it may be some third-party component that has the outro, and we can't easily add local
to it. Secondly, it may actually be intentional that it's not local because within a certain subtree (the page's view component in my router example) parents should wait for the outro, but beyond that subtree they shouldn't.
Describe the proposed solution
Perhaps something like <svelte:outrofence> .. </svelte:outrofence>
around the relevant subtree. (Maybe something similar could be considered for intros as well...)
Alternatives considered
I have a workaround, but it's obviously a huge hack:
OutroBlocker.svelte
<script>
import { onMount } from 'svelte'
import { get_current_component } from 'svelte/internal'
const thisComponent = get_current_component()
onMount(() => {
delete thisComponent.$$.fragment.o
})
</script>
<slot />
Usage: Just wrap whatever subtree that you want to suppress outros on in <OutroBlocker> ... </OutroBlocker>
.
Demo: https://svelte.dev/repl/d73d23f868ff4de49e2c42648dfa52c7?version=3.48.0
Of course it would be much better if this was natively supported.
Importance
would make my life easier