feat: make thumbhash work with image slider

src/components/ImageSlider.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-
   let slot: HTMLDivElement;
-  let images: HTMLImageElement[];
+  let images: (HTMLPictureElement | HTMLImageElement)[];
 
   export let title: string;
 
@@ -10,17 +8,24 @@
   let height: number;
   let loaded = false;
 
-  function hide(img: HTMLImageElement) {
+  function hide(img: HTMLPictureElement) {
     img.classList.remove("active");
   }
 
-  function show(img: HTMLImageElement) {
+  function show(img: HTMLPictureElement) {
     img.classList.add("active");
-    if (img?.alt) altText = img.alt;
+    const _img = img.querySelector("img");
+    if (!_img) return;
+    _img.addEventListener("load", () => {
+      img.classList.remove("thumb-loading");
+      _img.style.opacity = "1";
+      console.log("loaded");
+    });
+    if (_img?.alt) altText = _img.alt;
     else altText = "";
-    height = img.getBoundingClientRect().height;
+    height = _img.getBoundingClientRect().height;
     setTimeout(() => {
-      height = img.getBoundingClientRect().height;
+      height = _img.getBoundingClientRect().height;
     }, 100);
   }
 
@@ -33,8 +38,8 @@
     show(images[index]);
   }
 
-  $: if (slot) {
-    images = Array.from(slot.querySelectorAll("img"));
+  $: if (slot && !images?.length) {
+    images = Array.from(slot.querySelectorAll("picture"));
     if (images?.length) {
       images.forEach(hide);
       show(images[index]);
@@ -52,12 +57,26 @@
 <div
   class="wrapper grid overflow-hidden rounded-xl border border-light"
   class:title
+  class:not-loaded={!loaded}
   class:loaded
   style={`--height:${height}px`}
 >
   {#if title}
-    <div class="flex items-center p-x-4 bg">
+    <div class="flex items-center p-x-4 bg justify-between">
       <h3>{title}</h3>
+
+      <div class="overflow-hidden rounded-md bg-light gap-2 flex p-1">
+        <button
+          class="flex-1 i-tabler-arrow-left"
+          aria-label="previous image"
+          on:click={() => setIndex(index - 1)}
+        />
+        <button
+          class="flex-1 i-tabler-arrow-right"
+          aria-label="next image"
+          on:click={() => setIndex(index + 1)}
+        />
+      </div>
     </div>
   {/if}
 
@@ -65,22 +84,14 @@
     <slot />
   </div>
   <div class="p-2 flex place-content-between bg">
-    <p>{index + 1}/{images?.length}</p>
+    <p>
+      {#if images?.length}
+        {index + 1}/{images?.length}
+      {/if}
+    </p>
     {#if altText}
-      <p class="text-right">{altText}</p>
+      <p class="flex-1 text-center">{altText}</p>
     {/if}
-    <div class="overflow-hidden rounded-md bg-light gap-2 flex p-1">
-      <button
-        class="flex-1 i-tabler-arrow-left"
-        aria-label="previous image"
-        on:click={() => setIndex(index - 1)}
-      />
-      <button
-        class="flex-1 i-tabler-arrow-right"
-        aria-label="next image"
-        on:click={() => setIndex(index + 1)}
-      />
-    </div>
   </div>
 </div>
 
@@ -102,11 +113,15 @@
     height: calc(var(--height) + 40px);
   }
 
+  .not-loaded .images :global(picture):first-child {
+    display: block !important;
+  }
+
   .wrapper.title.loaded {
     height: calc(var(--height) + 80px);
   }
 
-  .images :global(img) {
+  .images :global(picture) {
     border-radius: 0px;
     display: none;
   }