From 59ba9a1c88f5b57a848643c4e4fb7f034e645131 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Mon, 16 Dec 2024 17:15:52 +0100
Subject: [PATCH] Lib: Make lazyimage fade in the image once loaded

---
 src/lib/components/LazyImage.svelte | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/LazyImage.svelte b/src/lib/components/LazyImage.svelte
index b3d46d4..76ec144 100644
--- a/src/lib/components/LazyImage.svelte
+++ b/src/lib/components/LazyImage.svelte
@@ -22,6 +22,10 @@
   const lazy_visible_handler = () => {
     load = true;
   };
+
+  const img_opacity_handler = (node: HTMLElement) => {
+    setTimeout(() => (node.style.opacity = "1"), 10);
+  };
 </script>
 
 <!-- Show a correctly sized div so the layout doesn't jump. -->
@@ -32,7 +36,13 @@
 >
   {#if load}
     {#await fetch_image_base64(src) then data}
-      <img src={data} style="width: 100%" {...restProps} />
+      <img
+        src={data}
+        use:img_opacity_handler
+        class="bg-surface-100 transition-opacity"
+        style="width: 100%; opacity: 0; transition-duration: 250ms;"
+        {...restProps}
+      />
     {/await}
   {/if}
 </div>