-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Description
Describe the bug
If a component used in a route has a transition applied, it will delay navigation and potentially create UI errors.
To Reproduce
In a brand new installation, create a new component e.g. Linker.svelte
and include it in the index
route.
<!-- src/lib/Linker.svelte -->
<script>
import { fade } from "svelte/transition";
let showImage = false;
</script>
<div
on:mouseenter={() => {
showImage = true;
}}
on:mouseleave={() => {
showImage = false;
}}>
<h1>Wow hi!</h1>
<a href="/about">About</a>
{#if showImage}
<img
transition:fade={{ duration: 2000 }}
src="https://picsum.photos/20"
alt="" />
{/if}
</div>
<!-- src/routes/index.svelte -->
<script>
import Linker from "../lib/Linker.svelte";
</script>
...
<Linker />
<h1>Great success!</h1>
Moving the cursor on top of the link, a small picture will slowly fade in. Once clicking on the link, the image will slowly fade out again, but the /about
page content will already be appended to the <slot />
and visible in the bottom. If the user moves the cursor back on top of the link while it is fading out, it will just fade in again and prevent the component from being removed completely - causing UI errors.
Expected behavior
When navigating, default behaviour should be to just switch route. No delays nor attempts to finalise transitions or to show both routes in the <slot />
at the same time.
Information about your Sapper Installation:
-
Issue appears in both Chrome and Safari from what I have tested, but I expect this to be the same across all browsers.
-
Using iMac 2011 with OSX Mojave
-
Running in localhost
-
Current latest release v0.27.4
-
Svelte v3
-
dynamic application
-
Using Rollup
Severity
Mainly it is just annoying, and I can't really find a workaround to prevent it unless I just remove the transition from the image having it appear and disappear instantly.
Additional context
Maybe a modifier to the transition could be an idea. We currently have modifiers like once
or preventDefault
on click events. Maybe add a transition:fade|ignoreRoute={{duration: 200}}
or the quite opposite - having the developer purposely asking for route specific transition.