Add initialization handling for LoRA page with loading state

- Implement dynamic initialization detection in lora_routes
- Add initialization notice template with loading spinner
- Create CSS styles for initialization notice
- Add client-side script to auto-refresh page when initialization completes

routes/lora_routes.py

@@ -49,12 +49,27 @@ class LoraRoutes:
     async def handle_loras_page(self, request: web.Request) -> web.Response:
         """Handle GET /loras request"""
         try:
-            # Get cached data for folders only
-            cache = await self.scanner.get_cached_data()
-            
-            # Render template with folders only
-            template = self.template_env.get_template('loras.html')
-            rendered = template.render(folders=cache.folders)
+            # 不等待缓存数据，直接检查缓存状态
+            is_initializing = (
+                self.scanner._cache is None or 
+                (hasattr(self.scanner, '_cache') and len(self.scanner._cache.raw_data) == 0)
+            )
+
+            if is_initializing:
+                # 如果正在初始化，返回一个只包含加载提示的页面
+                template = self.template_env.get_template('loras.html')
+                rendered = template.render(
+                    folders=[],  # 空文件夹列表
+                    is_initializing=True  # 新增标志
+                )
+            else:
+                # 正常流程
+                cache = await self.scanner.get_cached_data()
+                template = self.template_env.get_template('loras.html')
+                rendered = template.render(
+                    folders=cache.folders,
+                    is_initializing=False
+                )
             
             return web.Response(
                 text=rendered,

static/css/style.css

@@ -841,4 +841,38 @@ body.modal-open .toast-info {
 
 .trigger-word-tag:active {
     transform: scale(0.98);
+}
+
+.initialization-notice {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 200px;
+    margin: var(--space-3) 0;
+    padding: var(--space-3);
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    border-radius: var(--border-radius-base);
+    text-align: center;
+}
+
+.notice-content {
+    max-width: 400px;
+}
+
+.notice-content h2 {
+    color: var(--text-color);
+    margin: var(--space-2) 0;
+    font-size: 1.5em;
+}
+
+.notice-content p {
+    color: var(--text-color);
+    opacity: 0.8;
+    margin: var(--space-1) 0;
+}
+
+/* 使用已有的loading-spinner样式 */
+.initialization-notice .loading-spinner {
+    margin-bottom: var(--space-2);
 }

templates/loras.html

@@ -42,14 +42,46 @@
     {% include 'components/loading.html' %}
 
     <div class="container">
-        {% include 'components/controls.html' %}
-
-        <!-- Lora卡片容器 -->
-        <div class="card-grid" id="loraGrid">
-            <!-- Cards will be dynamically inserted here -->
+        {% if is_initializing %}
+        <div class="initialization-notice">
+            <div class="notice-content">
+                <div class="loading-spinner"></div>
+                <h2>Initializing LoRA Manager</h2>
+                <p>Scanning and building LoRA cache. This may take a few minutes...</p>
+            </div>
         </div>
+        {% else %}
+            {% include 'components/controls.html' %}
+            <!-- Lora卡片容器 -->
+            <div class="card-grid" id="loraGrid">
+                <!-- Cards will be dynamically inserted here -->
+            </div>
+        {% endif %}
     </div>
 
     <script type="module" src="/loras_static/js/main.js"></script>
+    <script>
+        // 检查初始化状态并设置自动刷新
+        {% if is_initializing %}
+        async function checkInitStatus() {
+            try {
+                const response = await fetch('/api/loras?page=1&page_size=1');
+                if (response.ok) {
+                    // 如果成功获取数据，说明初始化完成，刷新页面
+                    window.location.reload();
+                } else {
+                    // 如果还未完成，继续轮询
+                    setTimeout(checkInitStatus, 2000); // 每2秒检查一次
+                }
+            } catch (error) {
+                // 如果出错，继续轮询
+                setTimeout(checkInitStatus, 2000);
+            }
+        }
+        
+        // 启动状态检查
+        checkInitStatus();
+        {% endif %}
+    </script>
 </body>
 </html>