From b11757c9132efaa5bf51ce5d51977d503dfa8dae Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Thu, 20 Mar 2025 17:31:56 +0800
Subject: [PATCH] Fix infinite scroll

---
 static/js/api/loraApi.js                  |  6 +-----
 static/js/recipes.js                      | 16 ----------------
 static/js/utils/infiniteScroll.js         | 16 +++++++++++++++-
 templates/components/search_controls.html |  4 ----
 4 files changed, 16 insertions(+), 26 deletions(-)
 delete mode 100644 templates/components/search_controls.html

diff --git a/static/js/api/loraApi.js b/static/js/api/loraApi.js
index cb56486d..b81bdb0c 100644
--- a/static/js/api/loraApi.js
+++ b/static/js/api/loraApi.js
@@ -275,11 +275,7 @@ export function appendLoraCards(loras) {
     
     loras.forEach(lora => {
         const card = createLoraCard(lora);
-        if (sentinel) {
-            grid.insertBefore(card, sentinel);
-        } else {
-            grid.appendChild(card);
-        }
+        grid.appendChild(card);
     });
 }
 
diff --git a/static/js/recipes.js b/static/js/recipes.js
index 8d9ab47d..65ed0100 100644
--- a/static/js/recipes.js
+++ b/static/js/recipes.js
@@ -171,22 +171,6 @@ class RecipeManager {
             const recipeCard = new RecipeCard(recipe, (recipe) => this.showRecipeDetails(recipe));
             grid.appendChild(recipeCard.element);
         });
-        
-        // Add sentinel for infinite scroll if needed
-        if (this.pageState.hasMore) {
-            let sentinel = document.getElementById('scroll-sentinel');
-            if (!sentinel) {
-                sentinel = document.createElement('div');
-                sentinel.id = 'scroll-sentinel';
-                sentinel.style.height = '10px';
-                grid.appendChild(sentinel);
-                
-                // Re-observe the sentinel if we have an observer
-                if (state && state.observer) {
-                    state.observer.observe(sentinel);
-                }
-            }
-        }
     }
     
     showRecipeDetails(recipe) {
diff --git a/static/js/utils/infiniteScroll.js b/static/js/utils/infiniteScroll.js
index 0c54216b..c1eefe2e 100644
--- a/static/js/utils/infiniteScroll.js
+++ b/static/js/utils/infiniteScroll.js
@@ -65,10 +65,24 @@ export function initializeInfiniteScroll(pageType = 'loras') {
     if (existingSentinel) {
         state.observer.observe(existingSentinel);
     } else {
+        // Create a wrapper div that will be placed after the grid
+        const sentinelWrapper = document.createElement('div');
+        sentinelWrapper.style.width = '100%';
+        sentinelWrapper.style.height = '10px';
+        sentinelWrapper.style.margin = '0';
+        sentinelWrapper.style.padding = '0';
+        
+        // Create the actual sentinel element
         const sentinel = document.createElement('div');
         sentinel.id = 'scroll-sentinel';
         sentinel.style.height = '10px';
-        grid.appendChild(sentinel);
+        
+        // Add the sentinel to the wrapper
+        sentinelWrapper.appendChild(sentinel);
+        
+        // Insert the wrapper after the grid instead of inside it
+        grid.parentNode.insertBefore(sentinelWrapper, grid.nextSibling);
+        
         state.observer.observe(sentinel);
     }
 } 
\ No newline at end of file
diff --git a/templates/components/search_controls.html b/templates/components/search_controls.html
deleted file mode 100644
index 9ef97ecc..00000000
--- a/templates/components/search_controls.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div class="search-container">
-    <input type="text" id="searchInput" placeholder="Search...">
-    <button id="searchButton"><i class="fas fa-search"></i></button>
-</div>