feat: optimize image hash

src/components/Image.astro

@@ -10,12 +10,14 @@ interface Props {
   maxWidth?: number;
 }
 import { rgbaToThumbHash } from "thumbhash";
-import sharp from "sharp";
 
 const { src: image, hash = true, alt, maxWidth } = Astro.props;
 
 let thumbhash = "";
 
+const s = await import("sharp");
+const sharp = s.default;
+
 if (hash) {
   const scaleFactor = 100 / Math.max(image.width, image.height);
 
@@ -57,7 +59,7 @@ const sizes = [
   src={image}
   alt={alt}
   data-thumbhash={thumbhash}
-  pictureAttributes={{ class: hash ? "block h-full" : "" }}
+  pictureAttributes={{ class: hash ? "block h-full relative" : "" }}
   class={Astro.props.class}
   widths={sizes.map((size) => size.width)}
   sizes={sizes

src/components/Thumbhash.astro

@@ -11,6 +11,8 @@
     }, 600);
   }
 
+  console.log("Thumbhash script loaded");
+
   document.querySelectorAll("[data-thumbhash]").forEach((entry) => {
     const parent = entry?.parentNode as HTMLPictureElement;
     const img = entry as HTMLImageElement;
@@ -35,6 +37,10 @@
     parent.style.background = `url(${dataURL})`;
     parent.style.backgroundSize = "cover";
 
+    if (img.complete) {
+      return;
+    }
+
     img.style.opacity = "0";
     img.style.filter = "blur(5px)";
     img.style.transition = "opacity 0.6s ease, filter 0.8s ease";