Skip to content

A way to suppress outros for all descendents of a component #7620

Open
@CherryDT

Description

@CherryDT

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions