fix: serve cached server data before background sync

app/web/static/js/models-running.js

@@ -1,6 +1,8 @@
 class RunningModelsPage {
     constructor() {
         this.activeServer = getActiveServer();
+        this.worker = null;
+        this.lastRunningData = null;
         this.init();
     }
 
@@ -12,25 +14,105 @@ class RunningModelsPage {
             return;
         }
 
-        document.getElementById("refresh-btn")?.addEventListener("click", () => {
-            this.loadRunningModels();
-        });
+        this.loadFromLocalStorage();
 
-        this.loadRunningModels();
+        if (typeof Worker !== "undefined") {
+            this.worker = new Worker("/static/js/data-sync.worker.js");
+            this.worker.onmessage = (event) => this.handleWorkerMessage(event);
+            this.worker.onerror = (error) => {
+                console.error("Worker error:", error);
+                this.loadRunningModels(true);
+            };
+            const shouldSyncImmediately = this.shouldSyncImmediately();
+            this.worker.postMessage({
+                type: "SET_SERVER",
+                serverId: this.activeServer.id,
+                host: this.activeServer.host,
+                syncImmediately: shouldSyncImmediately,
+                lastSyncTimestamp: this.getLatestCacheTimestamp()
+            });
+            if (shouldSyncImmediately && !this.lastRunningData) {
+                this.renderLoadingState();
+            }
+        } else if (this.shouldSyncImmediately()) {
+            this.loadRunningModels(true);
+        }
+
+        document.getElementById("refresh-btn")?.addEventListener("click", () => {
+            if (this.worker) {
+                this.worker.postMessage({ type: "SYNC_NOW" });
+            } else {
+                this.loadRunningModels(true);
+            }
+        });
     }
 
-    async loadRunningModels() {
+    loadFromLocalStorage() {
+        const runningData = readServerCache(this.activeServer.id, "running");
+        if (!runningData) {
+            return;
+        }
+
+        this.lastRunningData = runningData;
+        this.renderStats(runningData.models || [], runningData.timestamp);
+        this.renderRunningModels(runningData.models || []);
+    }
+
+    handleWorkerMessage(event) {
+        const { type, health, modelsData, runningData, serverId } = event.data;
+
+        if (type !== "DATA_UPDATED") {
+            return;
+        }
+
+        if (serverId && serverId !== this.activeServer.id) {
+            return;
+        }
+
+        if (health) {
+            try {
+                writeServerCache(this.activeServer.id, "health", health);
+            } catch (error) {
+                console.warn("Cannot persist health in localStorage:", error);
+            }
+        }
+
+        if (modelsData) {
+            try {
+                writeServerCache(this.activeServer.id, "models", modelsData);
+            } catch (error) {
+                console.warn("Cannot persist models in localStorage:", error);
+            }
+        }
+
+        if (!runningData) {
+            return;
+        }
+
+        this.lastRunningData = runningData;
+        try {
+            writeServerCache(this.activeServer.id, "running", runningData);
+        } catch (error) {
+            console.warn("Cannot persist running models in localStorage:", error);
+        }
+
+        this.renderStats(runningData.models || [], runningData.timestamp);
+        this.renderRunningModels(runningData.models || []);
+    }
+
+    async loadRunningModels(forceNetwork = false) {
         const container = document.getElementById("running-models");
         if (!container) {
             return;
         }
 
-        container.innerHTML = `
-            <div class="text-center py-8">
-                <div class="inline-block w-8 h-8 border-4 border-gray-600 border-t-purple-500 rounded-full animate-spin"></div>
-                <p class="text-gray-400 mt-4">Refreshing data...</p>
-            </div>
-        `;
+        if (!forceNetwork && this.lastRunningData) {
+            this.renderStats(this.lastRunningData.models || [], this.lastRunningData.timestamp);
+            this.renderRunningModels(this.lastRunningData.models || []);
+            return;
+        }
+
+        this.renderLoadingState();
 
         try {
             const response = await fetch(this.buildApiUrl("/api/v1/models/running"));
@@ -40,8 +122,16 @@ class RunningModelsPage {
 
             const data = await response.json();
             const models = data.models || [];
+            const runningData = {
+                models,
+                total: data.total || models.length,
+                timestamp: new Date().toISOString(),
+                serverId: this.activeServer.id
+            };
 
-            this.renderStats(models);
+            this.lastRunningData = runningData;
+            writeServerCache(this.activeServer.id, "running", runningData);
+            this.renderStats(models, runningData.timestamp);
             this.renderRunningModels(models);
         } catch (error) {
             container.innerHTML = `
@@ -49,11 +139,24 @@ class RunningModelsPage {
                     <p>Failed to load ollama ps output</p>
                 </div>
             `;
-            this.renderStats([]);
+            this.renderStats([], null);
             console.error(error);
         }
     }
 
+    shouldSyncImmediately() {
+        const running = readServerCache(this.activeServer.id, "running");
+        if (!running) {
+            return true;
+        }
+
+        return isCacheStale(this.getLatestCacheTimestamp());
+    }
+
+    getLatestCacheTimestamp() {
+        return getLatestServerCacheTimestamp(this.activeServer.id, ["health", "models", "running"]);
+    }
+
     buildApiUrl(path) {
         const url = new URL(path, window.location.origin);
         url.searchParams.set("host", this.activeServer.host);
@@ -103,7 +206,7 @@ class RunningModelsPage {
         }
     }
 
-    renderStats(models) {
+    renderStats(models, timestamp = null) {
         const runningCountEl = document.getElementById("running-count");
         const vramTotalEl = document.getElementById("vram-total");
         const lastRefreshEl = document.getElementById("last-refresh");
@@ -117,7 +220,7 @@ class RunningModelsPage {
             vramTotalEl.textContent = this.formatBytes(totalVram);
         }
         if (lastRefreshEl) {
-            lastRefreshEl.textContent = new Date().toLocaleString("en-US");
+            lastRefreshEl.textContent = timestamp ? this.formatDateTime(timestamp) : "-";
         }
     }
 
@@ -210,6 +313,20 @@ class RunningModelsPage {
         div.textContent = String(text);
         return div.innerHTML;
     }
+
+    renderLoadingState() {
+        const container = document.getElementById("running-models");
+        if (!container || this.lastRunningData) {
+            return;
+        }
+
+        container.innerHTML = `
+            <div class="text-center py-8">
+                <div class="inline-block w-8 h-8 border-4 border-gray-600 border-t-purple-500 rounded-full animate-spin"></div>
+                <p class="text-gray-400 mt-4">Refreshing data...</p>
+            </div>
+        `;
+    }
 }
 
 document.addEventListener("DOMContentLoaded", () => {