diff --git a/frontend/src/pages/Status/StatusPage.tsx b/frontend/src/pages/Status/StatusPage.tsx index ebafee2..bb284f9 100644 --- a/frontend/src/pages/Status/StatusPage.tsx +++ b/frontend/src/pages/Status/StatusPage.tsx @@ -83,6 +83,7 @@ export function StatusPage() { const [config, setConfig] = useState(null); const [loading, setLoading] = useState(true); const [healthLoading, setHealthLoading] = useState(true); + const [modelsLoading, setModelsLoading] = useState(true); const [configOpen, setConfigOpen] = useState(false); const [refreshKey, setRefreshKey] = useState(0); const [showUpload, setShowUpload] = useState(false); @@ -93,6 +94,7 @@ export function StatusPage() { useEffect(() => { setLoading(true); setHealthLoading(true); + setModelsLoading(true); // Fetch all endpoints in parallel. The first three use raw fetch() (legacy // pattern already established in this file); model usage uses the typed @@ -113,6 +115,7 @@ export function StatusPage() { setLoading(false); setHealthLoading(false); + setModelsLoading(false); setLastRefresh(new Date()); }); }, [refreshKey]); @@ -304,13 +307,13 @@ export function StatusPage() { - {!modelUsage ? ( + {modelsLoading ? (
{[1, 2, 3, 4].map(i => (
))}
- ) : ( + ) : modelUsage ? ( modelUsage.map(entry => { const roleLabel = entry.role === 'main_llm' ? t.status.roleMainLlm : entry.role === 'hyde_llm' ? t.status.roleHydeLlm @@ -336,6 +339,8 @@ export function StatusPage() {
); }) + ) : ( +
{t.status.configLoadError}
)}