add visual flourish

src/lib/components/PasswordDialog.svelte

@@ -6,7 +6,8 @@
     openWallet,
   } from "$lib/wallet.svelte";
   import { browser } from "$app/environment";
-  import { onMount } from "svelte";
+  import { onMount, tick } from "svelte";
+  import { fly } from "svelte/transition";
 
   let { onunlock }: { onunlock: () => void } = $props();
 
@@ -14,8 +15,11 @@
   let password = $state("");
   let error = $state("");
   let isValidating = $state(false);
+  let show = $state(false);
 
-  onMount(() => {
+  onMount(async () => {
+    show = true;
+    await tick();
     dialogEl?.showModal();
   });
 
@@ -41,45 +45,50 @@
   }
 </script>
 
-<dialog bind:this={dialogEl}>
-  <h2>Unlock Wallet</h2>
-  <p>Enter your wallet password to decrypt your seed.</p>
-  {#if error}
-    <p
-      style="color: var(--error-color); font-size: 0.7rem; margin-bottom: 1rem;"
-    >
-      {error}
-    </p>
-  {/if}
-  <input
-    type="password"
-    class="retro-input"
-    bind:value={password}
-    placeholder="Password"
-    disabled={isValidating}
-    onkeydown={(e) => {
-      if (e.key === "Enter" && !isValidating) {
-        attemptUnlock();
-      }
-    }}
-  />
-  <div style="margin-top:1rem;text-align:center;">
-    <button
-      class="retro-btn primary"
+{#if show}
+  <dialog
+    bind:this={dialogEl}
+    transition:fly={{ y: 250, duration: 250, delay: 0.5 }}
+  >
+    <h2>Unlock Wallet</h2>
+    <p>Enter your wallet password to decrypt your seed.</p>
+    {#if error}
+      <p
+        style="color: var(--error-color); font-size: 0.7rem; margin-bottom: 1rem;"
+      >
+        {error}
+      </p>
+    {/if}
+    <input
+      type="password"
+      class="retro-input"
+      bind:value={password}
+      placeholder="Password"
       disabled={isValidating}
-      onclick={() => {
-        attemptUnlock();
-      }}>{isValidating ? "Validating..." : "Unlock"}</button
-    >
-  </div>
-</dialog>
+      onkeydown={(e) => {
+        if (e.key === "Enter" && !isValidating) {
+          attemptUnlock();
+        }
+      }}
+    />
+    <div style="margin-top:1rem;text-align:center;">
+      <button
+        class="retro-btn primary"
+        disabled={isValidating}
+        onclick={() => {
+          attemptUnlock();
+        }}>{isValidating ? "Validating..." : "Unlock"}</button
+      >
+    </div>
+  </dialog>
+{/if}
 
 <style>
   dialog {
     z-index: 2000;
   }
   dialog::backdrop {
-    background: rgba(0, 0, 0, 1);
+    background: transparent;
   }
   h2 {
     margin-top: 0;