feat: set transitions as local (#246)

# Motivation

Svelte transitions are executed by default in components regardless if their parent components destroy those or not. This behavior is known as the `|global` transitions setting and is the default in Svelte v3.

This leads to issue with the SvelteKit navigation because DOM elements might not be detached and related context might remain active.

We generally notice the issue in NNS dapp after navigation when the DOM wrongly contains two `split-pane` elements.

In Svelte v4 the default behavior was changed to `|local`. Setting that can already be used in v3 when explicitely set. This setting has for effect to not execute the transition and destroy the components if parents destroy those. i.e. to populate the destroy.

# References

- documentation: https://svelte.dev/docs/v4-migration-guide#transitions-are-local-by-default
- svelte issue: sveltejs/svelte#6686

# Changes

- scope all transitions of Svelte to `|local`

src/lib/components/Backdrop.svelte

@@ -17,8 +17,8 @@
   role="button"
   tabindex="-1"
   aria-label={$i18n.core.close}
-  in:fade={{ duration: FADE_IN_DURATION }}
-  out:fade={{ duration: FADE_OUT_DURATION }}
+  in:fade|local={{ duration: FADE_IN_DURATION }}
+  out:fade|local={{ duration: FADE_OUT_DURATION }}
   class="backdrop"
   on:click|stopPropagation={close}
   on:keypress={($event) => handleKeyPress({ $event, callback: close })}

src/lib/components/BusyScreen.svelte

@@ -7,7 +7,7 @@
 
 <!-- Display spinner and lock UI if busyStore is not empty -->
 {#if $busy}
-  <div data-tid="busy" transition:fade>
+  <div data-tid="busy" transition:fade|local>
     <div class="content">
       {#if nonNullish($busyMessage)}
         <p>{$busyMessage}</p>

src/lib/components/Modal.svelte

@@ -35,7 +35,7 @@
 {#if visible}
   <div
     class="modal"
-    transition:fade={{ duration: 25 }}
+    transition:fade|local={{ duration: 25 }}
     on:introend
     {role}
     data-tid={testId}
@@ -45,8 +45,8 @@
   >
     <Backdrop {disablePointerEvents} on:nnsClose />
     <div
-      in:fade={{ duration: FADE_IN_DURATION }}
-      out:fade={{ duration: FADE_OUT_DURATION }}
+      in:fade|local={{ duration: FADE_IN_DURATION }}
+      out:fade|local={{ duration: FADE_OUT_DURATION }}
       class={`wrapper ${role}`}
     >
       {#if showHeader}

src/lib/components/Popover.svelte

@@ -28,7 +28,7 @@
   <div
     role="menu"
     aria-orientation="vertical"
-    transition:fade
+    transition:fade|local
     class="popover"
     tabindex="-1"
     style="--popover-top: {`${bottom}px`}; --popover-left: {`${left}px`}; --popover-right: {`${
@@ -39,7 +39,7 @@
   >
     <Backdrop on:nnsClose={() => (visible = false)} />
     <div
-      transition:scale={{ delay: 25, duration: 150, easing: quintOut }}
+      transition:scale|local={{ delay: 25, duration: 150, easing: quintOut }}
       class="wrapper"
       class:rtl={direction === "rtl"}
     >

src/lib/components/Toast.svelte

@@ -76,8 +76,8 @@
 <div
   role="dialog"
   class={`toast ${theme ?? "themed"}`}
-  in:fly={{ y: (position === "top" ? -1 : 1) * 100, duration: 200 }}
-  out:fade={{ delay: 100 }}
+  in:fly|local={{ y: (position === "top" ? -1 : 1) * 100, duration: 200 }}
+  out:fade|local={{ delay: 100 }}
 >
   <div class="icon {level}" aria-hidden="true">
     {#if spinner}

src/lib/components/WizardTransition.svelte

@@ -19,7 +19,7 @@
 {#key transition}
   <div
     bind:clientWidth={absolutOffset}
-    in:fly={{ x: slideOffset, duration: ANIMATION_DURATION }}
+    in:fly|local={{ x: slideOffset, duration: ANIMATION_DURATION }}
   >
     <slot />
   </div>