feat: use test safe transitions

frontend/src/lib/components/accounts/TransactionCard.svelte

@@ -9,13 +9,12 @@
     TransactionIconType,
     UiTransaction,
   } from "$lib/types/transaction";
-  import { KeyValuePair } from "@dfinity/gix-components";
+  import { KeyValuePair, testSafeFade } from "@dfinity/gix-components";
   import {
     nonNullish,
     type TokenAmount,
     type TokenAmountV2,
   } from "@dfinity/utils";
-  import { fade } from "svelte/transition";
 
   export let transaction: UiTransaction;
 
@@ -56,7 +55,7 @@
   $: seconds = timestamp && timestamp.getTime() / 1000;
 </script>
 
-<article data-tid="transaction-card" transition:fade|global>
+<article data-tid="transaction-card" transition:testSafeFade>
   <div class="icon">
     <TransactionIcon type={iconType} {isPending} />
   </div>

frontend/src/lib/components/common/JsonPreview.svelte

@@ -4,9 +4,12 @@
   import { jsonRepresentationModeStore } from "$lib/derived/json-representation.derived";
   import { i18n } from "$lib/stores/i18n";
   import { expandObject, getObjMaxDepth } from "$lib/utils/utils";
-  import { IconCollapseAll, IconExpandAll } from "@dfinity/gix-components";
+  import {
+    IconCollapseAll,
+    IconExpandAll,
+    testSafeFade,
+  } from "@dfinity/gix-components";
   import { isNullish } from "@dfinity/utils";
-  import { fade } from "svelte/transition";
 
   const DEFAULT_EXPANDED_LEVEL = 1;
 
@@ -38,12 +41,12 @@
       on:click={toggleExpanded}
     >
       {#if isAllExpanded}
-        <div in:fade>
+        <div in:testSafeFade>
           <IconCollapseAll />
           <span class="expand-all-label">{$i18n.core.collapse_all}</span>
         </div>
       {:else}
-        <div in:fade>
+        <div in:testSafeFade>
           <IconExpandAll />
           <span class="expand-all-label">{$i18n.core.expand_all}</span>
         </div>
@@ -52,15 +55,15 @@
   {/if}
   <div data-tid="json-wrapper" class="json-wrapper">
     {#if $jsonRepresentationModeStore === "tree"}
-      <div in:fade>
+      <div in:testSafeFade>
         <TreeJson
           testId="tree-json"
           json={expandedData}
           defaultExpandedLevel={isAllExpanded ? Number.MAX_SAFE_INTEGER : 1}
         />
       </div>
     {:else}
-      <div in:fade>
+      <div in:testSafeFade>
         <RawJson testId="raw-json" {json} />
       </div>
     {/if}

frontend/src/lib/components/common/MenuItems.svelte

@@ -28,10 +28,10 @@
     ThemeToggleButton,
     layoutMenuOpen,
     menuCollapsed,
+    testSafeScale,
   } from "@dfinity/gix-components";
   import type { ComponentType } from "svelte";
   import { cubicIn, cubicOut } from "svelte/easing";
-  import { scale } from "svelte/transition";
 
   let routes: {
     context: string;
@@ -127,8 +127,8 @@
     <div
       data-tid="menu-footer"
       class="menu-footer"
-      out:scale={{ duration: 200, easing: cubicOut }}
-      in:scale={{ duration: 200, easing: cubicIn }}
+      out:testSafeScale={{ duration: 200, easing: cubicOut }}
+      in:testSafeScale={{ duration: 200, easing: cubicIn }}
     >
       <TotalValueLocked layout="stacked" />
       <div class="menu-footer-buttons">

frontend/src/lib/components/common/TreeJson.svelte

@@ -6,8 +6,7 @@
     type TreeJsonValueType,
   } from "$lib/utils/json.utils";
   import { typeOfLikeANumber } from "$lib/utils/utils";
-  import { IconExpandMore } from "@dfinity/gix-components";
-  import { fade } from "svelte/transition";
+  import { IconExpandMore, testSafeFade } from "@dfinity/gix-components";
 
   export let json: unknown | undefined = undefined;
   export let defaultExpandedLevel = Infinity;
@@ -72,7 +71,7 @@
   {/if}
   {#if !collapsed}
     <!-- children of expandable-key -->
-    <ul class:root class:is-array={isArray} in:fade data-tid={testId}>
+    <ul class:root class:is-array={isArray} in:testSafeFade data-tid={testId}>
       {#each children as [key, value]}
         <li class:root class:key-is-index={keyIsIndex}>
           <svelte:self

frontend/src/lib/components/proposal-detail/VotingCard/ExpandableProposalNeurons.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
-  import { Collapsible, IconExpandCircleDown } from "@dfinity/gix-components";
-  import { fade } from "svelte/transition";
+  import {
+    Collapsible,
+    IconExpandCircleDown,
+    testSafeFade,
+  } from "@dfinity/gix-components";
 
   export let testId: string;
 
   let toggleContent: () => void;
   let expanded: boolean;
 </script>
 
-<div class="container" in:fade>
+<div class="container" in:testSafeFade>
   <Collapsible
     {testId}
     expandButton={false}

frontend/src/lib/components/proposals/ActionableProposalCountBadge.svelte

@@ -4,10 +4,9 @@
   import type { Universe } from "$lib/types/universe";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
   import { isUniverseNns } from "$lib/utils/universe.utils";
-  import { Tooltip } from "@dfinity/gix-components";
+  import { Tooltip, testSafeScale } from "@dfinity/gix-components";
   import { Principal } from "@dfinity/principal";
   import { cubicOut } from "svelte/easing";
-  import { scale } from "svelte/transition";
 
   export let count: number;
   export let universe: Universe | "all";
@@ -34,7 +33,7 @@
 <TestIdWrapper testId="actionable-proposal-count-badge-component">
   <Tooltip idPrefix="actionable-count-tooltip" text={tooltipText} top={true}
     ><span
-      transition:scale={{
+      transition:testSafeScale={{
         duration: 250,
         easing: cubicOut,
       }}

frontend/src/lib/components/proposals/FiltersWrapper.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
-  import { fade } from "svelte/transition";
+  import { testSafeFade } from "@dfinity/gix-components";
 </script>
 
-<div class="filters" data-tid="proposals-filters" in:fade={{ duration: 150 }}>
+<div
+  class="filters"
+  data-tid="proposals-filters"
+  in:testSafeFade={{ duration: 150 }}
+>
   <slot />
 </div>
 

frontend/src/lib/components/proposals/NnsProposalsList.svelte

@@ -12,10 +12,10 @@
   import { authSignedInStore } from "$lib/derived/auth.derived";
   import { filteredActionableProposals } from "$lib/derived/proposals.derived";
   import { actionableNnsProposalsStore } from "$lib/stores/actionable-nns-proposals.store";
-  import { InfiniteScroll } from "@dfinity/gix-components";
+  import { InfiniteScroll, testSafeFade } from "@dfinity/gix-components";
   import type { ProposalInfo } from "@dfinity/nns";
   import { isNullish } from "@dfinity/utils";
-  import { fade } from "svelte/transition";
+
   export let hidden: boolean;
   export let disableInfiniteScroll: boolean;
   export let loading: boolean;
@@ -35,7 +35,7 @@
 
   {#if display}
     {#if !$actionableProposalsActiveStore}
-      <div in:fade data-tid="all-proposal-list">
+      <div in:testSafeFade data-tid="all-proposal-list">
         {#if loadingAnimation === "skeleton"}
           <LoadingProposals />
         {:else if $filteredActionableProposals.proposals.length === 0}
@@ -59,7 +59,7 @@
         {/if}
       </div>
     {:else}
-      <div in:fade data-tid="actionable-proposal-list">
+      <div in:testSafeFade data-tid="actionable-proposal-list">
         {#if !$authSignedInStore}
           <ActionableProposalsSignIn />
         {:else if isNullish(actionableProposals)}

frontend/src/lib/components/sns-proposals/SnsProposalsList.svelte

@@ -10,10 +10,9 @@
   import { authSignedInStore } from "$lib/derived/auth.derived";
   import { pageStore } from "$lib/derived/page.derived";
   import type { SnsProposalActionableData } from "$lib/derived/sns/sns-filtered-actionable-proposals.derived";
-  import { InfiniteScroll } from "@dfinity/gix-components";
+  import { InfiniteScroll, testSafeFade } from "@dfinity/gix-components";
   import type { SnsNervousSystemFunction } from "@dfinity/sns";
   import { fromNullable, isNullish } from "@dfinity/utils";
-  import { fade } from "svelte/transition";
 
   export let proposals: SnsProposalActionableData[] | undefined;
   export let actionableSelected: boolean;
@@ -26,7 +25,7 @@
   <SnsProposalsFilters />
 
   {#if !actionableSelected}
-    <div in:fade data-tid="all-proposal-list">
+    <div in:testSafeFade data-tid="all-proposal-list">
       {#if proposals === undefined}
         <LoadingProposals />
       {:else if proposals.length === 0}
@@ -51,7 +50,7 @@
       {/if}
     </div>
   {:else}
-    <div in:fade data-tid="actionable-proposal-list">
+    <div in:testSafeFade data-tid="actionable-proposal-list">
       {#if !$authSignedInStore}
         <ActionableProposalsSignIn />
       {:else if isNullish(proposals)}

frontend/src/lib/components/universe/SelectUniverseCard.svelte

@@ -15,11 +15,10 @@
   import { i18n } from "$lib/stores/i18n";
   import type { Universe } from "$lib/types/universe";
   import { isSelectedPath } from "$lib/utils/navigation.utils";
-  import { Card } from "@dfinity/gix-components";
+  import { Card, testSafeScale } from "@dfinity/gix-components";
   import { nonNullish } from "@dfinity/utils";
   import { onMount } from "svelte";
   import { cubicOut } from "svelte/easing";
-  import { scale } from "svelte/transition";
 
   export let selected: boolean;
   // "link" for desktop, "button" for mobile, "dropdown" to open the modal
@@ -74,7 +73,7 @@
           {#if $actionableProposalIndicationVisibleStore}
             {#if $actionableProposalTotalCountStore > 0 && mounted}
               <div
-                in:scale={{
+                in:testSafeScale={{
                   duration: 250,
                   easing: cubicOut,
                 }}