lazy-loading done

site/src/components/StandardCard.astro

@@ -43,7 +43,13 @@ const summaryText = truncate(summary || "", 180);
   {...(linkAttrs || {})}
 >
   <div class="card-media">
-    {imageUrl ? <img src={imageUrl} alt="" loading="lazy" /> : <div class="card-placeholder" />}
+    {imageUrl ? (
+      <div class="img-shimmer-wrap">
+        <img src={imageUrl} alt="" loading="lazy" class="img-loading" />
+      </div>
+    ) : (
+      <div class="card-placeholder" />
+    )}
   </div>
 
   <div class="card-body">

site/src/layouts/BaseLayout.astro

@@ -204,5 +204,30 @@ const canonicalUrl = `${siteUrl}${canonicalPath.startsWith("/") ? canonicalPath
         mql.addEventListener("change", () => setOpen(!mql.matches));
       })();
     </script>
+
+    <script is:inline>
+      (() => {
+        function reveal(img) {
+          img.classList.remove("img-loading");
+          img.classList.add("img-loaded");
+          var wrap = img.closest(".img-shimmer-wrap");
+          if (wrap) wrap.classList.add("img-loaded");
+        }
+        var imgs = document.querySelectorAll("img.img-loading");
+        for (var i = 0; i < imgs.length; i++) {
+          (function(img) {
+            if (img.complete && img.naturalWidth > 0) {
+              reveal(img);
+              return;
+            }
+            img.addEventListener("load", function() { reveal(img); });
+            img.addEventListener("error", function() {
+              var wrap = img.closest(".img-shimmer-wrap");
+              if (wrap) wrap.classList.add("img-error");
+            });
+          })(imgs[i]);
+        }
+      })();
+    </script>
   </body>
 </html>

site/src/pages/blog/page/[slug].astro

@@ -45,12 +45,15 @@ const metaDescription = (page.excerpt || "").slice(0, 160);
       </a>
     </div>
     {page.featuredImageUrl ? (
-      <img
-        src={page.featuredImageUrl}
-        alt=""
-        loading="lazy"
-        style="width: 100%; max-height: 420px; object-fit: cover; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.12);"
-      />
+      <div class="img-shimmer-wrap" style="width: 100%; max-height: 420px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12);">
+        <img
+          src={page.featuredImageUrl}
+          alt=""
+          loading="lazy"
+          class="img-loading"
+          style="width: 100%; max-height: 420px; object-fit: cover; display: block;"
+        />
+      </div>
     ) : null}
     <div class="prose" set:html={page.contentHtml} />
   </section>

site/src/pages/blog/post/[slug].astro

@@ -48,12 +48,15 @@ const metaDescription = (post.excerpt || "").slice(0, 160);
       {new Date(post.publishedAt).toLocaleDateString()}
     </p>
     {post.featuredImageUrl ? (
-      <img
-        src={post.featuredImageUrl}
-        alt=""
-        loading="lazy"
-        style="width: 100%; max-height: 420px; object-fit: cover; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.12);"
-      />
+      <div class="img-shimmer-wrap" style="width: 100%; max-height: 420px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12);">
+        <img
+          src={post.featuredImageUrl}
+          alt=""
+          loading="lazy"
+          class="img-loading"
+          style="width: 100%; max-height: 420px; object-fit: cover; display: block;"
+        />
+      </div>
     ) : null}
     <div class="prose" set:html={post.contentHtml} />
   </section>