feat: Enhance infinite scroll functionality with improved observer settings and scroll event handling

static/js/utils/infiniteScroll.js

@@ -48,6 +48,7 @@ export function initializeInfiniteScroll(pageType = 'loras') {
 
     const debouncedLoadMore = debounce(loadMoreFunction, 100);
 
+    // Create a more robust observer with lower threshold and root margin
     state.observer = new IntersectionObserver(
         (entries) => {
             const target = entries[0];
@@ -55,7 +56,10 @@ export function initializeInfiniteScroll(pageType = 'loras') {
                 debouncedLoadMore();
             }
         },
-        { threshold: 0.1 }
+        { 
+            threshold: 0.01,  // Lower threshold to detect even minimal visibility
+            rootMargin: '0px 0px 300px 0px' // Increase bottom margin to trigger earlier
+        }
     );
 
     const grid = document.getElementById(gridId);
@@ -71,14 +75,14 @@ export function initializeInfiniteScroll(pageType = 'loras') {
         // 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.height = '30px'; // Increased height for better visibility
         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';
+        sentinel.style.height = '30px'; // Match wrapper height
         
         // Add the sentinel to the wrapper
         sentinelWrapper.appendChild(sentinel);
@@ -88,4 +92,37 @@ export function initializeInfiniteScroll(pageType = 'loras') {
         
         state.observer.observe(sentinel);
     }
+    
+    // Add a scroll event backup to handle edge cases
+    const handleScroll = debounce(() => {
+        if (pageState.isLoading || !pageState.hasMore) return;
+        
+        const sentinel = document.getElementById('scroll-sentinel');
+        if (!sentinel) return;
+        
+        const rect = sentinel.getBoundingClientRect();
+        const windowHeight = window.innerHeight;
+        
+        // If sentinel is within 500px of viewport bottom, load more
+        if (rect.top < windowHeight + 500) {
+            debouncedLoadMore();
+        }
+    }, 200);
+    
+    // Clean up existing scroll listener if any
+    if (state.scrollHandler) {
+        window.removeEventListener('scroll', state.scrollHandler);
+    }
+    
+    // Save reference to the handler for cleanup
+    state.scrollHandler = handleScroll;
+    window.addEventListener('scroll', state.scrollHandler);
+    
+    // Check position immediately in case content is already visible
+    setTimeout(() => {
+        const sentinel = document.getElementById('scroll-sentinel');
+        if (sentinel && sentinel.getBoundingClientRect().top < window.innerHeight) {
+            debouncedLoadMore();
+        }
+    }, 100);
 }

templates/components/checkpoint_modals.html

@@ -1,38 +1,7 @@
 <!-- Checkpoint Modals -->
-<!-- Delete Confirmation Modal -->
-<div id="deleteConfirmModal" class="modal" style="display: none;">
-    <div class="modal-content">
-        <div class="modal-header">
-            <h2>Confirm Delete</h2>
-            <span class="close">&times;</span>
-        </div>
-        <div class="modal-body">
-            <p id="deleteConfirmMessage">Are you sure you want to delete this checkpoint?</p>
-        </div>
-        <div class="modal-footer">
-            <button id="cancelDeleteBtn" class="btn btn-secondary">Cancel</button>
-            <button id="confirmDeleteBtn" class="btn btn-danger">Delete</button>
-        </div>
-    </div>
-</div>
 
-<!-- Checkpoint Details Modal (to be implemented in the future) -->
+<!-- Checkpoint details Modal -->
-<div id="checkpointModal" class="modal" style="display: none;">
+<div id="checkpointModal" class="modal"></div>
-    <div class="modal-content modal-large">
-        <div class="modal-header">
-            <h2 id="checkpointModalTitle">Checkpoint Details</h2>
-            <span class="close">&times;</span>
-        </div>
-        <div class="modal-body">
-            <div id="checkpointModalContent">
-                <!-- Content will be dynamically added here -->
-                <div class="placeholder-message">
-                    <p>Checkpoint details will be displayed here.</p>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
 
 <!-- Download Checkpoint from URL Modal -->
 <div id="checkpointDownloadModal" class="modal">

templates/components/lora_modals.html

@@ -1,9 +1,6 @@
 <!-- Model details Modal -->
 <div id="loraModal" class="modal"></div>
 
-<!-- Checkpoint details Modal -->
-<div id="checkpointModal" class="modal"></div>
-
 <!-- Download from URL Modal (for LoRAs) -->
 <div id="downloadModal" class="modal">
     <div class="modal-content">