feat: make thumbhash work with image slider

src/layouts/Layout.astro

@@ -123,7 +123,7 @@ const { title, width = "compact" } = Astro.props;
     <main id="main-content" class="flex flex-col mt-4xl gap-y-2xl">
       <slot />
     </main>
-    <footer>
+    <footer class="px-4">
       <LanguagePicker />
     </footer>
     <style>
@@ -157,7 +157,6 @@ const { title, width = "compact" } = Astro.props;
           const img = entry;
 
           if (parent?.nodeName !== "PICTURE") return;
-          parent.classList.add("thumb");
 
           const hash = img.getAttribute("data-thumbhash");
           if (!hash) return;
@@ -178,18 +177,31 @@ const { title, width = "compact" } = Astro.props;
           parent.style.background = `url(${dataURL})`;
           parent.style.backgroundSize = "cover";
 
-          if (img.complete) return;
+          if (img.complete || parent.complete) return;
+          let count = 0;
+          const interval = setInterval(() => {
+            count++;
+            if (count > 20) {
+              clearInterval(interval);
+              show(img);
+            }
+            if (img.complete || parent.complete) {
+              clearInterval(interval);
+              show(img);
+            }
+          }, 100);
+
+          img.addEventListener(
+            "load",
+            () => {
+              clearInterval(interval);
+              show(img);
+            },
+            { once: true },
+          );
 
           img.style.opacity = "0";
-          img.style.filter = "blur(5px)";
           img.style.transition = "opacity 0.6s ease, filter 0.8s ease";
-
-          const sources = parent.querySelectorAll("source");
-
-          img.onload = () => show(img);
-          for (const source of sources) {
-            source.addEventListener("load", () => show(img));
-          }
         });
       })();
     </script>