From 48729b172df47e56aff753cf4084a7fe792ad36e Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Thu, 12 Feb 2026 14:27:41 +0100
Subject: [PATCH] improve nodeList loading indicator, streamlining

---
 web/frontend/src/generic/JobList.svelte       |   2 +-
 web/frontend/src/systems/NodeList.svelte      |  20 +--
 .../src/systems/nodelist/NodeListRow.svelte   | 134 ++++++++++--------
 3 files changed, 83 insertions(+), 73 deletions(-)

diff --git a/web/frontend/src/generic/JobList.svelte b/web/frontend/src/generic/JobList.svelte
index 278f189e..3ccbb560 100644
--- a/web/frontend/src/generic/JobList.svelte
+++ b/web/frontend/src/generic/JobList.svelte
@@ -305,7 +305,7 @@
         {#if $jobsStore.fetching || !$jobsStore.data}
           <tr>
             <td colspan={metrics.length + 1}>
-              <div style="text-align:center;">
+              <div style="text-align:center; margin-top: 1rem;">
                 <Spinner secondary />
               </div>
             </td>
diff --git a/web/frontend/src/systems/NodeList.svelte b/web/frontend/src/systems/NodeList.svelte
index da196b82..2e342168 100644
--- a/web/frontend/src/systems/NodeList.svelte
+++ b/web/frontend/src/systems/NodeList.svelte
@@ -104,7 +104,7 @@
   let itemsPerPage = $derived(usePaging ? (ccconfig?.nodeList_nodesPerPage || 10) : 10);
   let paging = $derived({ itemsPerPage, page });
 
-  const nodesQuery = $derived(queryStore({
+  const nodesStore = $derived(queryStore({
     client: client,
     query: nodeListQuery,
     variables: {
@@ -122,7 +122,7 @@
     requestPolicy: "network-only", // Resolution queries are cached, but how to access them? For now: reload on every change
   }));
 
-  const matchedNodes = $derived($nodesQuery?.data?.nodeMetricsList?.totalNodes || 0);
+  const matchedNodes = $derived($nodesStore?.data?.nodeMetricsList?.totalNodes || 0);
 
   /* Effects */
   $effect(() => {
@@ -135,7 +135,7 @@
         } = document.documentElement;
 
         // Add 100 px offset to trigger load earlier
-        if (scrollTop + clientHeight >= scrollHeight - 100  && $nodesQuery?.data?.nodeMetricsList?.hasNextPage) {
+        if (scrollTop + clientHeight >= scrollHeight - 100  && $nodesStore?.data?.nodeMetricsList?.hasNextPage) {
           page += 1
         };
       });
@@ -143,9 +143,9 @@
   });
 
   $effect(() => {
-    if ($nodesQuery?.data) {
+    if ($nodesStore?.data) {
       untrack(() => {
-        handleNodes($nodesQuery?.data?.nodeMetricsList?.items);
+        handleNodes($nodesStore?.data?.nodeMetricsList?.items);
       });
       selectedMetrics = [...pendingSelectedMetrics]; // Trigger Rerender in NodeListRow Only After Data is Fetched
     };
@@ -228,7 +228,7 @@
             style="padding-top: {headerPaddingTop}px;"
           >
             {cluster} Node Info
-            {#if $nodesQuery.fetching}
+            {#if $nodesStore.fetching}
               <Spinner size="sm" style="margin-left:10px;" secondary />
             {/if}
           </th>
@@ -245,22 +245,22 @@
         </tr>
       </thead>
       <tbody>
-        {#if $nodesQuery.error}
+        {#if $nodesStore.error}
           <Row>
             <Col>
-              <Card body color="danger">{$nodesQuery.error.message}</Card>
+              <Card body color="danger">{$nodesStore.error.message}</Card>
             </Col>
           </Row>
         {:else}
           {#each nodes as nodeData (nodeData.host)}
-            <NodeListRow {nodeData} {cluster} {selectedMetrics} {globalMetrics}/>
+            <NodeListRow {nodeData} {cluster} {selectedMetrics} {globalMetrics} nodeDataFetching={$nodesStore.fetching}/>
           {:else}
             <tr>
               <td colspan={selectedMetrics.length + 1}> No nodes found </td>
             </tr>
           {/each}
         {/if}
-        {#if $nodesQuery.fetching || !$nodesQuery.data}
+        {#if $nodesStore.fetching || !$nodesStore.data}
           <tr>
             <td colspan={pendingSelectedMetrics.length + 1}>
               <div style="text-align:center;">
diff --git a/web/frontend/src/systems/nodelist/NodeListRow.svelte b/web/frontend/src/systems/nodelist/NodeListRow.svelte
index 46f8c4a4..1fca83f2 100644
--- a/web/frontend/src/systems/nodelist/NodeListRow.svelte
+++ b/web/frontend/src/systems/nodelist/NodeListRow.svelte
@@ -4,6 +4,7 @@
   Properties:
   - `cluster String`: The nodes' cluster
   - `nodeData Object`: The node data object including metric data
+  - `nodeDataFetching Bool`: Whether the metric query still runs
   - `selectedMetrics [String]`: The array of selected metrics
   - `globalMetrics [Obj]`: Includes the backend supplied availabilities for cluster and subCluster
 -->
@@ -24,6 +25,7 @@
   let {
     cluster,
     nodeData,
+    nodeDataFetching,
     selectedMetrics,
     globalMetrics
   } = $props();
@@ -72,7 +74,7 @@
   );
 
   const extendedLegendData = $derived($nodeJobsData?.data ? buildExtendedLegend() : null);
-  const refinedData = $derived(nodeData?.metrics ? sortAndSelectScope(selectedMetrics, nodeData.metrics) : []);
+  const refinedData = $derived(!nodeDataFetching ? sortAndSelectScope(selectedMetrics, nodeData.metrics) : []);
   const dataHealth = $derived(refinedData.filter((rd) => rd.availability == "configured").map((enabled) => (enabled?.data?.metric?.series?.length > 0)));
 
   /* Functions */
@@ -150,65 +152,73 @@
         hoststate={nodeData?.state? nodeData.state: 'notindb'}/>
     {/if}
   </td>
-  {#each refinedData as metricData, i (metricData?.data?.name || i)}
-    {#key metricData}
-      <td>
-        {#if metricData?.availability == "none"}
-          <Card body class="mx-2" color="light">
-            <p>No dataset(s) returned for <b>{selectedMetrics[i]}</b></p>
-            <p class="mb-1">Metric is not configured for cluster <b>{cluster}</b>.</p>
-          </Card>
-        {:else if metricData?.availability == "disabled"}
-          <Card body class="mx-2" color="info">
-            <p>No dataset(s) returned for <b>{selectedMetrics[i]}</b></p>
-            <p class="mb-1">Metric has been disabled for subcluster <b>{nodeData.subCluster}</b>.</p>
-          </Card>
-        {:else if !metricData?.data}
-          <Card body class="mx-2" color="warning">
-            <p>No dataset(s) returned for <b>{selectedMetrics[i]}</b></p>
-            <p class="mb-1">Metric or host was not found in metric store for cluster <b>{cluster}</b>.</p>
-          </Card>
-        {:else if !!metricData.data?.metric.statisticsSeries}
-          <!-- "No Data"-Warning included in MetricPlot-Component -->
-          <MetricPlot
-            {cluster}
-            subCluster={nodeData.subCluster}
-            metric={metricData.data.name}
-            scope={metricData.data.scope}
-            timestep={metricData.data.metric.timestep}
-            series={metricData.data.metric.series}
-            statisticsSeries={metricData.data?.metric.statisticsSeries}
-            useStatsSeries={!!metricData.data?.metric.statisticsSeries}
-            height={175}
-            {plotSync}
-            forNode
-          />
-          <div class="my-2"></div>
-          <MetricPlot
-            {cluster}
-            subCluster={nodeData.subCluster}
-            metric={metricData.data.name}
-            scope={metricData.data.scope}
-            timestep={metricData.data.metric.timestep}
-            series={metricData.data.metric.series}
-            height={175}
-            {extendedLegendData}
-            {plotSync}
-            forNode
-          />
-        {:else}
-          <MetricPlot
-            {cluster}
-            subCluster={nodeData.subCluster}
-            metric={metricData.data.name}
-            scope={metricData.data.scope}
-            timestep={metricData.data.metric.timestep}
-            series={metricData.data.metric.series}
-            height={375}
-            forNode
-          />
-        {/if}
-      </td>
-    {/key}
-  {/each}
+  {#if nodeDataFetching}
+    <td colspan={selectedMetrics.length}>
+      <div style="text-align:center; margin-top: 1rem;">
+        <Spinner secondary />
+      </div>
+    </td>
+  {:else}
+    {#each refinedData as metricData, i (metricData?.data?.name || i)}
+      {#key metricData}
+        <td>
+          {#if metricData?.availability == "none"}
+            <Card body class="mx-2" color="light">
+              <p>No dataset(s) returned for <b>{selectedMetrics[i]}</b></p>
+              <p class="mb-1">Metric is not configured for cluster <b>{cluster}</b>.</p>
+            </Card>
+          {:else if metricData?.availability == "disabled"}
+            <Card body class="mx-2" color="info">
+              <p>No dataset(s) returned for <b>{selectedMetrics[i]}</b></p>
+              <p class="mb-1">Metric has been disabled for subcluster <b>{nodeData.subCluster}</b>.</p>
+            </Card>
+          {:else if !metricData?.data}
+            <Card body class="mx-2" color="warning">
+              <p>No dataset(s) returned for <b>{selectedMetrics[i]}</b></p>
+              <p class="mb-1">Metric or host was not found in metric store for cluster <b>{cluster}</b>.</p>
+            </Card>
+          {:else if !!metricData.data?.metric.statisticsSeries}
+            <!-- "No Data"-Warning included in MetricPlot-Component -->
+            <MetricPlot
+              {cluster}
+              subCluster={nodeData.subCluster}
+              metric={metricData.data.name}
+              scope={metricData.data.scope}
+              timestep={metricData.data.metric.timestep}
+              series={metricData.data.metric.series}
+              statisticsSeries={metricData.data?.metric.statisticsSeries}
+              useStatsSeries={!!metricData.data?.metric.statisticsSeries}
+              height={175}
+              {plotSync}
+              forNode
+            />
+            <div class="my-2"></div>
+            <MetricPlot
+              {cluster}
+              subCluster={nodeData.subCluster}
+              metric={metricData.data.name}
+              scope={metricData.data.scope}
+              timestep={metricData.data.metric.timestep}
+              series={metricData.data.metric.series}
+              height={175}
+              {extendedLegendData}
+              {plotSync}
+              forNode
+            />
+          {:else}
+            <MetricPlot
+              {cluster}
+              subCluster={nodeData.subCluster}
+              metric={metricData.data.name}
+              scope={metricData.data.scope}
+              timestep={metricData.data.metric.timestep}
+              series={metricData.data.metric.series}
+              height={375}
+              forNode
+            />
+          {/if}
+        </td>
+      {/key}
+    {/each}
+  {/if}
 </tr>