From 4c2edf2f81fd42b55f9440ab9885daf937d789c9 Mon Sep 17 00:00:00 2001
From: partisan <none@noone.no>
Date: Wed, 26 Mar 2025 20:17:39 +0100
Subject: [PATCH] Fixed image dynamic scrolling not working with DriveCache =
 true

---
 static/js/dynamicscrollingimages.js | 32 ++++++++++++-----------------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/static/js/dynamicscrollingimages.js b/static/js/dynamicscrollingimages.js
index 6969a53..d31016a 100644
--- a/static/js/dynamicscrollingimages.js
+++ b/static/js/dynamicscrollingimages.js
@@ -53,33 +53,31 @@
      */
     function fetchNextPage() {
         if (isFetching || noMoreImages) return;
-    
-        // Start the timer for loading indicator
         loadingTimer = setTimeout(() => {
             loadingIndicator.style.display = 'flex';
         }, 150);
-    
         isFetching = true;
         page += 1;
     
         fetch(`/search?q=${encodeURIComponent(query)}&t=image&p=${page}&ajax=true`)
             .then(response => response.text())
             .then(html => {
-                clearTimeout(loadingTimer); // Clear the timer if fetch is successful
-                loadingIndicator.style.display = 'none'; // Hide the loading indicator
+                clearTimeout(loadingTimer);
+                loadingIndicator.style.display = 'none';
     
-                let parser = new DOMParser();
-                let doc = parser.parseFromString(html, 'text/html');
-                let newImages = doc.querySelectorAll('.image');
+                // Use a temporary div to parse the HTML fragment
+                let tempDiv = document.createElement('div');
+                tempDiv.innerHTML = html;
+                let newImages = tempDiv.querySelectorAll('.image');
     
                 if (newImages.length > 0) {
                     let resultsContainer = document.querySelector('.images');
                     newImages.forEach(imageDiv => {
-                        // Append new images to the container
-                        resultsContainer.appendChild(imageDiv);
-
-                        // Get the img element
-                        let img = imageDiv.querySelector('img');
+                        // Clone the node to ensure it's part of the main document
+                        let clonedImageDiv = imageDiv.cloneNode(true);
+                        resultsContainer.appendChild(clonedImageDiv);
+    
+                        let img = clonedImageDiv.querySelector('img');
                         if (img) {
                             let id = img.getAttribute('data-id');
                             if (id) {
@@ -87,13 +85,11 @@
                                 imageIds.push(id);
                             }
                             if (hardCacheEnabled) {
-                                // Replace image with placeholder
                                 img.src = '/static/images/placeholder.svg';
                                 img.onerror = function() {
                                     handleImageError(img);
                                 };
                             } else {
-                                // HardCacheEnabled is false; load images immediately
                                 img.src = img.getAttribute('data-full');
                                 img.onerror = function() {
                                     handleImageError(img);
@@ -104,17 +100,15 @@
                     if (hardCacheEnabled) {
                         checkImageStatus();
                     }
-                    // After appending new images, ensure the page is scrollable
                     ensureScrollable();
                 } else {
-                    // No more images to load
                     noMoreImages = true;
                 }
                 isFetching = false;
             })
             .catch(error => {
-                clearTimeout(loadingTimer); // Clear the timer if fetch fails
-                loadingIndicator.style.display = 'none'; // Hide the loading indicator
+                clearTimeout(loadingTimer);
+                loadingIndicator.style.display = 'none';
                 console.error('Error fetching next page:', error);
                 isFetching = false;
             });