From 9dc8c0a77aa1b24845f3bf060c9f0c649e8c3d5e Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Mon, 30 Dec 2024 16:14:50 -0800
Subject: qr fade in

---
 src/components/InvoiceData.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'src/components/InvoiceData.svelte')

diff --git a/src/components/InvoiceData.svelte b/src/components/InvoiceData.svelte
index c996a913..ca7d5e7b 100644
--- a/src/components/InvoiceData.svelte
+++ b/src/components/InvoiceData.svelte
@@ -16,15 +16,19 @@
     t,
   } = $props();
 
+  let loaded = $state(false);
   let { memo } = $derived(invoice);
+  let load = () => (loaded = true);
 </script>
 
 {#if showQr}
-  <div class="max-w-[360px] mx-auto min-h-[340px]">
+  <div class="max-w-[360px] mx-auto min-h-[360px]">
     <a href={link}>
       <img
         src={`/qr/${encodeURIComponent(invoice.text)}/raw`}
-        class="z-10 border-4 border-white"
+        class="z-10 border-4 border-white opacity-0 transition-opacity duration-300"
+        class:opacity-100={loaded}
+        onload={load}
         alt={txt}
       />
     </a>
-- 
cgit v1.2.3