Update generation.html

generation.html

@@ -377,11 +377,7 @@
           resultContainer.className = "mt-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4";
           document.body.appendChild(resultContainer);
         }
-        resultContainer.innerHTML = `
-          <div class="col-span-full flex justify-center items-center">
-            <img src="https://i.gifer.com/YCZH.gif" alt="loading" class="w-20 h-20"/>
-          </div>
-        `;
+        resultContainer.innerHTML = "";
 
         // 1. Convert current image to base64
         const imageBlob = await fetch(currentImageUrl).then(r => r.blob());
@@ -415,17 +411,30 @@
         if (!searchResp.ok) throw new Error("Search failed");
         const result = await searchResp.json();
 
-        // 5. Process results
-        for (const r of result.results) {
+        // 4. Create placeholders with spinner for each result
+        const placeholders = result.results.map(r => {
+          const wrapper = document.createElement("div");
+          wrapper.className = "m-2 text-center";
+    
+          const spinner = document.createElement("img");
+          spinner.src = "https://i.gifer.com/YCZH.gif";
+          spinner.className = "w-20 h-20 mx-auto";
+    
+          wrapper.appendChild(spinner);
+          resultContainer.appendChild(wrapper);
+          return { wrapper, data: r };
+        });
+        
+        // 5. Load images one by one
+        for (const item of placeholders) {
           try {
-            const proxyUrl = r.proxyUrl;
-            const resp = await fetch(proxyUrl);
+            const resp = await fetch(item.data.proxyUrl);
             const blob = await resp.blob();
-
+    
             // Send to dewatermark API
             let formData = new FormData();
             formData.append("file", blob, "input.webp");
-
+    
             const cleanResp = await fetch("https://nowatermark.p.rapidapi.com/dewatermark", {
               method: "POST",
               headers: {
@@ -434,35 +443,26 @@
               },
               body: formData
             });
-
+    
             if (!cleanResp.ok) {
-              console.warn("Skipping image, dewatermark failed:", r);
+              console.warn("Skipping image, dewatermark failed:", item.data);
+              item.wrapper.innerHTML = ""; // Remove spinner
               continue;
             }
-            
-            let finalBlob = await cleanResp.blob();
-            let imgUrl = URL.createObjectURL(finalBlob);
-
-            // Display
-            let wrapper = document.createElement("div");
-            wrapper.className = "m-2 text-center";
-            
-            let img = document.createElement("img");
+    
+            const finalBlob = await cleanResp.blob();
+            const imgUrl = URL.createObjectURL(finalBlob);
+    
+            // Replace spinner with final image
+            item.wrapper.innerHTML = "";
+            const img = document.createElement("img");
             img.src = imgUrl;
             img.className = "w-40 h-40 object-cover rounded-md shadow-md";
-
-            // let link = document.createElement("a");
-            // link.href = r.urlList[0]?.sourceUrl || "#";
-            // link.textContent = "Source";
-            // link.target = "_blank";
-            // link.className = "block mt-1 text-blue-500 underline text-sm";
-
-            wrapper.appendChild(img);
-            // wrapper.appendChild(link);
-            resultContainer.appendChild(wrapper);
-
+            item.wrapper.appendChild(img);
+    
           } catch (err) {
             console.warn("Error processing one result:", err);
+            item.wrapper.innerHTML = ""; // Remove spinner if error
           }
         }