fix: wizard modal glitch (#198)

src/lib/components/Modal.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { fade, scale } from "svelte/transition";
-  import { quintOut } from "svelte/easing";
+  import { fade } from "svelte/transition";
   import { createEventDispatcher } from "svelte";
   import { i18n } from "$lib/stores/i18n";
   import IconClose from "$lib/icons/IconClose.svelte";
@@ -22,22 +21,27 @@
 
   const dispatch = createEventDispatcher();
   const close = () => dispatch("nnsClose");
+
+  // A bit faster fade in that backdrop IN, a bit slower on OUT
+  const FADE_IN_DURATION = 125 as const;
+  const FADE_OUT_DURATION = 200 as const;
 </script>
 
 {#if visible}
   <div
     class="modal"
-    transition:fade={{ duration: 125 }}
+    transition:fade={{ duration: 25 }}
+    on:introend
     {role}
     data-tid={testId}
     aria-labelledby={showHeader ? "modalTitle" : undefined}
     aria-describedby="modalContent"
     on:click|stopPropagation
-    on:introend
   >
     <Backdrop {disablePointerEvents} on:nnsClose />
     <div
-      transition:scale={{ delay: 25, duration: 150, easing: quintOut }}
+      in:fade={{ duration: FADE_IN_DURATION }}
+      out:fade={{ duration: FADE_OUT_DURATION }}
       class={`wrapper ${role}`}
     >
       {#if showHeader}

src/lib/components/WizardModal.svelte

@@ -3,6 +3,7 @@
   import WizardTransition from "./WizardTransition.svelte";
   import { WizardStepsState } from "$lib/stores/wizard.state";
   import type { WizardStep, WizardSteps } from "$lib/types/wizard";
+  import { createEventDispatcher } from "svelte";
 
   export let steps: WizardSteps;
   export let disablePointerEvents = false;
@@ -21,20 +22,24 @@
   export const back = () => (stepState = stepState.back());
   export const set = (step: number) => (stepState = stepState.set(step));
 
-  let presented = false;
+  // onDestroy is not always called when repetitively opened/closed in NNS-dapp.
+  // This might be linked to Svelte issue https://github.com/sveltejs/svelte/issues/5268.
+  // We use to display the content of the wizard modal according the modal intro state (see GIT history) but, this happens to be visually glitchy.
+  // That is why we rather enforce not rendering any content in the DOM when the modal is closed which solve both issue.
+  const dispatch = createEventDispatcher();
+  let visible = true;
+  const close = () => {
+    visible = false;
+    dispatch("nnsClose");
+  };
 </script>
 
-<Modal
-  on:nnsClose
-  on:introend={() => (presented = true)}
-  {testId}
-  {disablePointerEvents}
->
-  <slot name="title" slot="title" />
+{#if visible}
+  <Modal on:nnsClose={close} {testId} {disablePointerEvents}>
+    <slot name="title" slot="title" />
 
-  {#if presented}
     <WizardTransition {transition}>
       <slot />
     </WizardTransition>
-  {/if}
-</Modal>
+  </Modal>
+{/if}