Blocked navigation - Should transitions be local?

[lucfranken]

We ran into an issue which blocked navigation with Routify: https://github.com/sveltech/routify

After a lot of research it seems that the animation (fade) of the Alert component blocks the navigation. It's hard to debug because it's a timing issue so hard to reproduce.

Advice received is that the transition should be local:

https://svelte.dev/tutorial/local-transitions https://github.com/bestguy/sveltestrap/blob/master/src/Alert.svelte#L28

Is that something which has been considered for Sveltstrap?

[jakobrosenberg]

I haven't seen the repo in question, but it sounds like this bug. https://github.com/sveltejs/svelte/issues/3685

If that's what we're looking at, the easiest fix would be adding a local directive to the transition. out:fade => out:fade|local

[lucfranken]

Thanks @jakobrosenberg I did some further research on this issue and came to the following conclusions:

The fade = true / false setting and the UncontrolledAlert do not make any different on this issue.

What does work is just using the static example HTML from bootstrap:

        <div class="alert alert-success" role="alert">
            <h4 class="alert-heading">Well done!</h4>
            <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
            <hr>
            <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
        </div>

Then the issue is gone. So that seems to show we can really pin it down to how the alert is created in svelte strap.

[vince83110]

+1 for this issue, still blocking the Alert component with routify.

Any update ? Thanks !