feat(story): Adding throbber when loading full size image

Signed-off-by: Vincent Boutour <[email protected]>
ViBiOh · Dec 27, 2022 · ef77eab · ef77eab
1 parent f20498f
commit ef77eab
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/cmd/fibr/static/scripts/async-image.js b/cmd/fibr/static/scripts/async-image.js
@@ -112,6 +112,20 @@ async function fetchThumbnail() {
         }
 
         const lazyImage = entry.target;
+        const parent = lazyImage.parentElement.parentElement;
+
+        const storyThrobber = generateThrobber([
+          'throbber-white',
+          'throbber-overlay',
+        ]);
+        parent.appendChild(storyThrobber);
+
+        lazyImage.addEventListener(
+          'load',
+          () => parent.removeChild(storyThrobber),
+          { once: true },
+        );
+
         if (window.webpHero) {
           const response = await fetch(lazyImage.dataset.src, {
             credentials: 'same-origin',