From 98dc8cf5b56daff34306937b74b9e2bc2ec4a822 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Fri, 23 Jan 2026 16:54:30 +0100
Subject: [PATCH] add loading indicators to status detail

---
 .../src/status/dashdetails/StatusDash.svelte  | 43 +++++++++++++++++--
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/web/frontend/src/status/dashdetails/StatusDash.svelte b/web/frontend/src/status/dashdetails/StatusDash.svelte
index b80db96f..9968a9fd 100644
--- a/web/frontend/src/status/dashdetails/StatusDash.svelte
+++ b/web/frontend/src/status/dashdetails/StatusDash.svelte
@@ -16,6 +16,7 @@
     Table,
     Progress,
     Icon,
+    Spinner
   } from "@sveltestrap/sveltestrap";
   import {
     queryStore,
@@ -408,7 +409,19 @@
 <hr/>
 
 <!-- Node Stack Charts Dev-->
-{#if $statesTimed.data}
+{#if $statesTimed.fetching}
+  <Row cols={1} class="text-center mt-3">
+    <Col>
+      <Spinner />
+    </Col>
+  </Row>
+{:else if $statesTimed.error}
+  <Row cols={1} class="text-center mt-3">
+    <Col>  
+      <Card body color="danger">{$statesTimed.error.message}</Card>
+    </Col>
+  </Row>
+{:else if $statesTimed.data}
   <Row cols={{ md: 2 , sm: 1}} class="mb-3 justify-content-center">
     <Col class="px-3 mt-2 mt-lg-0">
       <div>
@@ -450,7 +463,19 @@
 <hr/>
 
 <!-- Node Health Pis, later Charts -->
-{#if $statusQuery?.data?.nodeStates}
+{#if $statusQuery.fetching}
+  <Row cols={1} class="text-center mt-3">
+    <Col>
+      <Spinner />
+    </Col>
+  </Row>
+{:else if $statusQuery.error}
+  <Row cols={1} class="text-center mt-3">
+    <Col>  
+      <Card body color="danger">{$statesTimed.error.message}</Card>
+    </Col>
+  </Row>
+{:else if $statusQuery?.data?.nodeStates}
   <Row cols={{ lg: 4, md: 2 , sm: 1}} class="mb-3 justify-content-center">
     <Col class="px-3 mt-2 mt-lg-0">
       <div bind:clientWidth={pieWidth}>
@@ -536,7 +561,19 @@
 
 <hr/>
 <!-- Gauges & Roofline per Subcluster-->
-{#if $statusQuery.data}
+{#if $statusQuery.fetching}
+  <Row cols={1} class="text-center mt-3">
+    <Col>
+      <Spinner />
+    </Col>
+  </Row>
+{:else if $statusQuery.error}
+  <Row cols={1} class="text-center mt-3">
+    <Col>  
+      <Card body color="danger">{$statusQuery.error.message}</Card>
+    </Col>
+  </Row>
+{:else if $statusQuery.data}
   {#each clusters.find((c) => c.name == cluster).subClusters as subCluster, i}
     <Row cols={{ lg: 3, md: 1 , sm: 1}} class="mb-3 justify-content-center">
       <Col class="px-3">