From 0ea902297c58c4058c94f18d2f0b988721b39fa8 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sun, 26 Apr 2026 20:29:13 +0100
Subject: [PATCH] Stop skeleton pulse animation when image finishes loading

Adds a load event handler that adds the `loaded` class to `.image-wrapper`,
which sets `animation: none` on the `::before` skeleton element. Also handles
already-cached images via `img.complete`. Closes #69.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/mdx/BasicImage.astro | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/mdx/BasicImage.astro b/src/components/mdx/BasicImage.astro
index 6e04895d..56cc6349 100644
--- a/src/components/mdx/BasicImage.astro
+++ b/src/components/mdx/BasicImage.astro
@@ -122,6 +122,10 @@ const isImageMetadata = typeof imageSrc !== "string" && "src" in imageSrc;
         animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     }
 
+    .image-wrapper.loaded::before {
+        animation: none;
+    }
+
     @keyframes pulse {
         0%,
         100% {
@@ -168,3 +172,16 @@ const isImageMetadata = typeof imageSrc !== "string" && "src" in imageSrc;
         }
     }
 </style>
+
+<script>
+    document.querySelectorAll<HTMLElement>(".image-wrapper").forEach((wrapper) => {
+        const img = wrapper.querySelector("img");
+        if (!img) return;
+        const stopPulse = () => wrapper.classList.add("loaded");
+        if (img.complete) {
+            stopPulse();
+        } else {
+            img.addEventListener("load", stopPulse, { once: true });
+        }
+    });
+</script>