From 5cb32a868157c45a5d1bd7fc51623332a224adfb Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sun, 29 Dec 2024 18:24:00 +0500
Subject: [PATCH] add placeholder images

---
 index.html                |   6 +++---
 static/images/sticker.png | Bin 0 -> 1991 bytes
 static/pack_preview.js    |  36 +++++++++++++++++++++++++++++++++---
 3 files changed, 36 insertions(+), 6 deletions(-)
 create mode 100644 static/images/sticker.png

diff --git a/index.html b/index.html
index ef62349..f7a6ec2 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
         <div class="flex-col hidden gap-4 w-full md:w-[600px]" id="preview_sticker_pack">
             <div class="flex flex-wrap items-center justify-around gap-4 p-4 rounded-lg shadow-lg md:flex-row bg-stone-800 text-slate-200"
                 id="preview_sticker_pack">
-                <img src="static/images/cinny.png" class="object-contain w-32 md:w-64" alt="" id="preview_sticker_pack_image" />
+                <img src="static/images/sticker.png" class="object-contain w-32 md:w-64" alt="" id="preview_sticker_pack_image" />
                 <div class="flex flex-col justify-center gap-2">
                     <p class="text-4xl text-bold" id="preview_sticker_pack_name">
                         {sticker_pack_name}
@@ -93,9 +93,9 @@
         </div>
 
         <div class="gap-1 [grid-template-columns:repeat(auto-fill,minmax(128px,372px))] justify-center items-center hidden w-full" id="stickerpacks_index">
-            <div class="grid hidden gap-4 items-center flex-grow bg-stone-800 text-slate-200 border-black border-solid border-2 p-4 rounded-lg">
+            <div class="hidden gap-4 items-center flex-grow bg-stone-800 text-slate-200 border-black border-solid border-2 p-4 rounded-lg">
                 <img src="static/images/cinny.png" alt="" class="object-contain w-24"/>
-                <div>
+                <div class="grid">
                     <p class="text-2xl">{pack_name}</p>
                     <p class="text-xl">{artist_name}</p>
                 </div>
diff --git a/static/images/sticker.png b/static/images/sticker.png
new file mode 100644
index 0000000000000000000000000000000000000000..bcce1acb8296507e7f7a9bbe1f308523945dd394
GIT binary patch
literal 1991
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
Z{{Sn^Upnj~fvo@l002ovPDHLkV1kK>oBRL(

literal 0
HcmV?d00001

diff --git a/static/pack_preview.js b/static/pack_preview.js
index 72dc79d..be1ab2b 100644
--- a/static/pack_preview.js
+++ b/static/pack_preview.js
@@ -53,6 +53,15 @@ async function loadIndex() {
   }
 }
 
+function imageIsLoaded(img_id, img_placeholder) {
+  const __img = document.getElementById(img_id);
+  const __img_placeholder = document.getElementById(img_placeholder);
+  if (__img.complete) {
+    __img_placeholder.classList.add("hidden");
+    __img.classList.remove("hidden");
+  }
+}
+
 async function loadStickerpacks() {
   stickerpacksIndexContainer.classList.remove("hidden");
   stickerpacksIndexContainer.classList.add("grid");
@@ -76,12 +85,16 @@ async function loadStickerpacks() {
     if (!data) {
       continue;
     }
+    const _tmp_id = data.stickers[0].id;
     stickerpacksIndexContainer.innerHTML += `
-    <a href="index.html?id=${index.packs[i].split('.json')[0]}">
+    <a href="index.html?id=${index.packs[i].split(".json")[0]}">
       <div class="flex gap-4 items-center bg-stone-800 text-slate-200 p-4 rounded-lg">
             <img src="${getStickerImage(data.stickers[0].id)}" alt="${
+      data.stickers[0].body
+    }" class="hidden object-contain w-24" id="${_tmp_id}"/>
+      <img src="static/images/sticker.png" alt="${
         data.stickers[0].body
-      }" class="object-contain w-24"/>
+      }" class="object-contain w-24" id="${_tmp_id}-placeholder"/>
             <div>
               <p class="text-2xl">${data.title}</p>
               ${
@@ -93,6 +106,11 @@ async function loadStickerpacks() {
         </div>
     </a>
       `;
+    const __img = document.getElementById(_tmp_id);
+    __img.addEventListener("load", () => {
+      imageIsLoaded(_tmp_id, `${_tmp_id}-placeholder`);
+      __img.removeEventListener("load", this);
+    });
   }
 }
 
@@ -186,10 +204,22 @@ function updatePackInfo(data) {
   for (let i = 0; i < data.stickers.length; i++) {
     const sticker = data.stickers[i];
     const stickerImage = document.createElement("img");
+    const stickerImagePlaceholder = document.createElement("img");
+    stickerImagePlaceholder.src = `static/images/sticker.png`;
+    stickerImagePlaceholder.id = `${sticker.id}-placeholder`;
+    stickerImagePlaceholder.alt = sticker.body;
+    stickerImagePlaceholder.classList.add("object-contain", "md:w-20", "w-24");
+    packStickers.appendChild(stickerImagePlaceholder);
     stickerImage.src = getStickerImage(sticker.id);
+    stickerImage.id = sticker.id;
     stickerImage.alt = sticker.body;
-    stickerImage.classList.add("object-contain", "md:w-20", "w-24");
+    stickerImage.classList.add("object-contain", "md:w-20", "w-24", "hidden");
     packStickers.appendChild(stickerImage);
+
+    stickerImage.addEventListener("load", () => {
+      imageIsLoaded(sticker.id, `${sticker.id}-placeholder`);
+      stickerImage.removeEventListener("load", this);
+    });
   }
 }