feat: use directive transition wrappers (#574)

# Motivation

Implements the transition directives wrappers provided in #573 for the
transition that lead the
[CI](https://github.com/dfinity/nns-dapp/actions/runs/13129931873/job/36632946426)
to fail in the NNS dapp Svelte v5 branch.

# Changes

- Instead of using `svelte/transition`, use the wrappers that skips the
transitions for testing purposes

# Tests

I asserted this changes has no impact on the test suite of NNS dapp by
integrating a manual package and running the CI successfully in
dfinity/nns-dapp#6336.

We will have to mock the `ResizeObserver` though but, that's something
we need for Svelte v5 testing anyway
dfinity/nns-dapp#6337

Author: peterpeterparker

src/lib/components/Backdrop.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { fade } from "svelte/transition";
+  import { testSafeFade } from "$lib/directives/transition.directives";
   import { createEventDispatcher } from "svelte";
   import { i18n } from "$lib/stores/i18n";
   import { handleKeyPress } from "$lib/utils/keyboard.utils";
@@ -18,8 +18,8 @@
   role="button"
   tabindex="-1"
   aria-label={$i18n.core.close}
-  in:fade|global={{ duration: FADE_IN_DURATION }}
-  out:fade|global={{ duration: FADE_OUT_DURATION }}
+  in:testSafeFade|global={{ duration: FADE_IN_DURATION }}
+  out:testSafeFade|global={{ duration: FADE_OUT_DURATION }}
   class="backdrop"
   class:visible={!invisible}
   on:click|stopPropagation={close}

src/lib/components/BusyScreen.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-  import { fade } from "svelte/transition";
+  import { testSafeFade } from "$lib/directives/transition.directives";
   import { busy, busyMessage } from "$lib/stores/busy.store";
   import Spinner from "$lib/components/Spinner.svelte";
   import { nonNullish } from "@dfinity/utils";
 </script>
 
 <!-- Display spinner and lock UI if busyStore is not empty -->
 {#if $busy}
-  <div data-tid="busy" transition:fade|global>
+  <div data-tid="busy" transition:testSafeFade|global>
     <div class="content">
       {#if nonNullish($busyMessage)}
         <p>{$busyMessage}</p>

src/lib/components/Modal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { fade } from "svelte/transition";
+  import { testSafeFade } from "$lib/directives/transition.directives";
   import { createEventDispatcher } from "svelte";
   import { i18n } from "$lib/stores/i18n";
   import IconClose from "$lib/icons/IconClose.svelte";
@@ -46,7 +46,7 @@
 {#if visible}
   <div
     class="modal"
-    transition:fade|global={{ duration: 25 }}
+    transition:testSafeFade|global={{ duration: 25 }}
     on:introend
     {role}
     data-tid={testId}
@@ -56,8 +56,8 @@
   >
     <Backdrop {disablePointerEvents} on:nnsClose />
     <div
-      in:fade|global={{ duration: FADE_IN_DURATION }}
-      out:fade|global={{ duration: FADE_OUT_DURATION }}
+      in:testSafeFade|global={{ duration: FADE_IN_DURATION }}
+      out:testSafeFade|global={{ duration: FADE_OUT_DURATION }}
       class={`wrapper ${role}`}
     >
       {#if showHeader}

src/lib/components/Popover.svelte

@@ -1,6 +1,9 @@
 <!-- https://github.com/papyrs/papyrs/blob/main/src/lib/components/ui/Popover.svelte -->
 <script lang="ts">
-  import { fade, scale } from "svelte/transition";
+  import {
+    testSafeFade,
+    testSafeScale,
+  } from "$lib/directives/transition.directives";
   import { quintOut } from "svelte/easing";
   import { i18n } from "$lib/stores/i18n";
   import Backdrop from "./Backdrop.svelte";
@@ -30,7 +33,7 @@
   <div
     role="menu"
     aria-orientation="vertical"
-    transition:fade|global
+    transition:testSafeFade|global
     class="popover"
     tabindex="-1"
     style="--popover-top: {`${bottom}px`}; --popover-left: {`${left}px`}; --popover-right: {`${
@@ -45,7 +48,11 @@
       invisible={invisibleBackdrop}
     />
     <div
-      transition:scale|global={{ delay: 25, duration: 150, easing: quintOut }}
+      transition:testSafeScale|global={{
+        delay: 25,
+        duration: 150,
+        easing: quintOut,
+      }}
       class="wrapper"
       class:with-border={invisibleBackdrop}
       class:rtl={direction === "rtl"}

src/lib/components/ThemeToggleButton.svelte

@@ -4,7 +4,7 @@
   import { i18n } from "$lib/stores/i18n";
   import IconLightMode from "$lib/icons/IconLightMode.svelte";
   import IconDarkMode from "$lib/icons/IconDarkMode.svelte";
-  import { fade } from "svelte/transition";
+  import { testSafeFade } from "$lib/directives/transition.directives";
 
   const switchTheme = () => {
     themeStore.select($themeStore === Theme.LIGHT ? Theme.DARK : Theme.LIGHT);
@@ -21,11 +21,11 @@
   aria-label={$i18n.theme.switch_theme}
 >
   {#if isDarkMode}
-    <span in:fade|global>
+    <span in:testSafeFade|global>
       <IconLightMode />
     </span>
   {:else}
-    <span in:fade|global>
+    <span in:testSafeFade|global>
       <IconDarkMode />
     </span>
   {/if}

src/lib/components/Toast.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import { toastsStore } from "$lib/stores/toasts.store";
-  import { fade, fly } from "svelte/transition";
+  import {
+    testSafeFade,
+    testSafeFly,
+  } from "$lib/directives/transition.directives";
   import { i18n } from "$lib/stores/i18n";
   import type {
     ToastLevel,
@@ -92,8 +95,11 @@
   data-tid="toast-component"
   role="dialog"
   class={`toast ${theme ?? "themed"}`}
-  in:fly|global={{ y: (position === "top" ? -1 : 1) * 100, duration: 200 }}
-  out:fade|global={{ delay: 100 }}
+  in:testSafeFly|global={{
+    y: (position === "top" ? -1 : 1) * 100,
+    duration: 200,
+  }}
+  out:testSafeFade|global={{ delay: 100 }}
 >
   <div class="icon {level}" aria-hidden="true">
     {#if spinner}

src/lib/components/WizardTransition.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { fly } from "svelte/transition";
+  import { testSafeFly } from "$lib/directives/transition.directives";
 
   // Instead of a number an object is used to make svelte notice any updates need rerender
   export let transition: { diff: number } = { diff: 0 };
@@ -19,7 +19,7 @@
 {#key transition}
   <div
     bind:clientWidth={absolutOffset}
-    in:fly|global={{ x: slideOffset, duration: ANIMATION_DURATION }}
+    in:testSafeFly|global={{ x: slideOffset, duration: ANIMATION_DURATION }}
     class="transition"
   >
     <slot />