From af8f5ba04eddae8cc364e402ead7d61fa3762585 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Mon, 12 May 2025 21:20:28 +0800
Subject: [PATCH] Implement client-side placeholder handling for empty recipe
 grid and remove server-side conditional rendering

---
 static/js/utils/VirtualScroller.js | 72 ++++++++++++++++++++++++++++++
 templates/recipes.html             | 39 +---------------
 2 files changed, 74 insertions(+), 37 deletions(-)

diff --git a/static/js/utils/VirtualScroller.js b/static/js/utils/VirtualScroller.js
index 8be0b288..83f954dd 100644
--- a/static/js/utils/VirtualScroller.js
+++ b/static/js/utils/VirtualScroller.js
@@ -194,6 +194,13 @@ export class VirtualScroller {
             // Update the spacer height based on the total number of items
             this.updateSpacerHeight();
             
+            // Check if there are no items and show placeholder if needed
+            if (this.items.length === 0) {
+                this.showNoItemsPlaceholder();
+            } else {
+                this.removeNoItemsPlaceholder();
+            }
+            
             // Reset page state to sync with our virtual scroller
             pageState.currentPage = 2; // Next page to load would be 2
             pageState.hasMore = this.hasMore;
@@ -202,6 +209,7 @@ export class VirtualScroller {
             return { items, totalItems, hasMore };
         } catch (err) {
             console.error('Failed to load initial batch:', err);
+            this.showNoItemsPlaceholder('Failed to load items. Please try refreshing the page.');
             throw err;
         } finally {
             this.isLoading = false;
@@ -387,6 +395,13 @@ export class VirtualScroller {
         this.hasMore = hasMore;
         this.updateSpacerHeight();
         
+        // Check if there are no items and show placeholder if needed
+        if (this.items.length === 0) {
+            this.showNoItemsPlaceholder();
+        } else {
+            this.removeNoItemsPlaceholder();
+        }
+        
         // Clear all rendered items and redraw
         this.clearRenderedItems();
         this.scheduleRender();
@@ -564,6 +579,9 @@ export class VirtualScroller {
         // Reset spacer height
         this.spacerElement.style.height = '0px';
         
+        // Remove any placeholder
+        this.removeNoItemsPlaceholder();
+        
         // Schedule a re-render
         this.scheduleRender();
     }
@@ -591,6 +609,60 @@ export class VirtualScroller {
         this.clearLoadingTimeout();
     }
 
+    // Add methods to handle placeholder display
+    showNoItemsPlaceholder(message) {
+        // Remove any existing placeholder first
+        this.removeNoItemsPlaceholder();
+        
+        // Create placeholder message
+        const placeholder = document.createElement('div');
+        placeholder.className = 'placeholder-message';
+        
+        // Determine appropriate message based on page type
+        let placeholderText = '';
+        
+        if (message) {
+            placeholderText = message;
+        } else {
+            const pageType = state.currentPageType;
+            
+            if (pageType === 'recipes') {
+                placeholderText = `
+                    <p>No recipes found</p>
+                    <p>Add recipe images to your recipes folder to see them here.</p>
+                `;
+            } else if (pageType === 'loras') {
+                placeholderText = `
+                    <p>No LoRAs found</p>
+                    <p>Add LoRAs to your models folder to see them here.</p>
+                `;
+            } else if (pageType === 'checkpoints') {
+                placeholderText = `
+                    <p>No checkpoints found</p>
+                    <p>Add checkpoints to your models folder to see them here.</p>
+                `;
+            } else {
+                placeholderText = `
+                    <p>No items found</p>
+                    <p>Try adjusting your search filters or add more content.</p>
+                `;
+            }
+        }
+        
+        placeholder.innerHTML = placeholderText;
+        placeholder.id = 'virtualScrollPlaceholder';
+        
+        // Append placeholder to the grid
+        this.gridElement.appendChild(placeholder);
+    }
+
+    removeNoItemsPlaceholder() {
+        const placeholder = document.getElementById('virtualScrollPlaceholder');
+        if (placeholder) {
+            placeholder.remove();
+        }
+    }
+
     // Utility method for debouncing
     debounce(func, wait) {
         let timeout;
diff --git a/templates/recipes.html b/templates/recipes.html
index c8f9269f..b6d921c5 100644
--- a/templates/recipes.html
+++ b/templates/recipes.html
@@ -77,43 +77,8 @@
     
     <!-- Recipe grid -->
     <div class="card-grid" id="recipeGrid">
-        {% if recipes and recipes|length > 0 %}
-            {% for recipe in recipes %}
-                <div class="lora-card" data-file-path="{{ recipe.file_path }}" data-title="{{ recipe.title }}" data-created="{{ recipe.created_date }}">
-                    <div class="recipe-indicator" title="Recipe">R</div>
-                    <div class="card-preview">
-                        <img src="{{ recipe.file_url }}" alt="{{ recipe.title }}">
-                        <div class="card-header">
-                            <div class="base-model-wrapper">
-                                {% if recipe.base_model %}
-                                <span class="base-model-label" title="{{ recipe.base_model }}">
-                                    {{ recipe.base_model }}
-                                </span>
-                                {% endif %}
-                            </div>
-                            <div class="card-actions">
-                                <i class="fas fa-share-alt" title="Share Recipe"></i>
-                                <i class="fas fa-copy" title="Copy Recipe"></i>
-                                <i class="fas fa-trash" title="Delete Recipe"></i>
-                            </div>
-                        </div>
-                        <div class="card-footer">
-                            <div class="model-info">
-                                <span class="model-name">{{ recipe.title }}</span>
-                            </div>
-                            <div class="lora-count" title="Number of LoRAs in this recipe">
-                                <i class="fas fa-layer-group"></i> {{ recipe.loras|length }}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            {% endfor %}
-        {% else %}
-            <div class="placeholder-message">
-                <p>No recipes found</p>
-                <p>Add recipe images to your recipes folder to see them here.</p>
-            </div>
-        {% endif %}
+        <!-- Remove the server-side conditional rendering and placeholder -->
+        <!-- Virtual scrolling will handle the display logic on the client side -->
     </div>
 {% endblock %}