improve nodeList loading indicator, streamlining

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>

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;">

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,6 +152,13 @@
         hoststate={nodeData?.state? nodeData.state: 'notindb'}/>
     {/if}
   </td>
+  {#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>
@@ -211,4 +220,5 @@
         </td>
       {/key}
     {/each}
+  {/if}
 </tr>