review loading indicators in nodeList

web/frontend/src/systems/NodeList.svelte

@@ -152,12 +152,21 @@
   });
 
   $effect(() => {
-    // Triggers (Except Paging)
+    // Update NodeListRows metrics only: Keep ordered nodes on page 1
     from, to
     pendingSelectedMetrics, selectedResolution
+    // Continous Scroll: Paging if parameters change: Existing entries will not match new selections
+    if (!usePaging) {
+      nodes = [];
+      page = 1;
+    }
+  });
+
+  $effect(() => {
+    // Update NodeListRows metrics only: Keep ordered nodes on page 1
     hostnameFilter, hoststateFilter
     // Continous Scroll: Paging if parameters change: Existing entries will not match new selections
-    // Nodes Array Reset in HandleNodes func
+    nodes = [];
     if (!usePaging) {
       page = 1;
     }
@@ -255,9 +264,11 @@
           {#each nodes as nodeData (nodeData.host)}
             <NodeListRow {nodeData} {cluster} {selectedMetrics} {globalMetrics} nodeDataFetching={$nodesStore.fetching}/>
           {:else}
+            {#if !$nodesStore.fetching}
               <tr>
                 <td colspan={selectedMetrics.length + 1}> No nodes found </td>
               </tr>
+            {/if}
           {/each}
         {/if}
         {#if $nodesStore.fetching || !$nodesStore.data}

web/frontend/src/systems/nodelist/NodeInfo.svelte

@@ -51,6 +51,8 @@
 
   /* Derived */
   // Not at least one returned, selected metric: NodeHealth warning
+  const fetchInfo = $derived(dataHealth.includes('fetching'));
+  // Not at least one returned, selected metric: NodeHealth warning
   const healthWarn = $derived(!dataHealth.includes(true));
   // At least one non-returned selected metric: Metric config error?
   const metricWarn = $derived(dataHealth.includes(false));
@@ -84,10 +86,17 @@
     <Row cols={{xs: 1, lg: 2}}>
       <Col class="mb-2 mb-lg-0">
         <InputGroup size="sm">
-          {#if healthWarn}
+          {#if fetchInfo}
+            <InputGroupText class="flex-grow-1 flex-lg-grow-0">
+              <Icon name="arrow-clockwise" style="padding-right: 0.5rem;"/>
+            </InputGroupText>
+            <Button class="flex-grow-1" color="dark" outline disabled>
+              Fetching
+            </Button>
+          {:else if healthWarn}
             <InputGroupText class="flex-grow-1 flex-lg-grow-0">
               <Icon name="exclamation-circle" style="padding-right: 0.5rem;"/>
-              <span>Jobs</span>
+              <span>Info</span>
             </InputGroupText>
             <Button class="flex-grow-1" color="danger" disabled>
               No Metrics
@@ -95,7 +104,7 @@
           {:else if metricWarn}
             <InputGroupText class="flex-grow-1 flex-lg-grow-0">
               <Icon name="info-circle" style="padding-right: 0.5rem;"/>
-              <span>Jobs</span>
+              <span>Info</span>
             </InputGroupText>
             <Button class="flex-grow-1" color="warning" disabled>
               Missing Metric

web/frontend/src/systems/nodelist/NodeListRow.svelte

@@ -74,8 +74,8 @@
   );
 
   const extendedLegendData = $derived($nodeJobsData?.data ? buildExtendedLegend() : null);
-  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)));
+  const refinedData = $derived(nodeData?.metrics ? sortAndSelectScope(selectedMetrics, nodeData.metrics) : []);
+  const dataHealth = $derived(refinedData.filter((rd) => rd.availability == "configured").map((enabled) => (nodeDataFetching ? 'fetching' : enabled?.data?.metric?.series?.length > 0)));
 
   /* Functions */
   function sortAndSelectScope(metricList = [], nodeMetrics = []) {
@@ -152,17 +152,14 @@
         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>
-          {#if metricData?.availability == "none"}
+        {#if !metricData?.data && nodeDataFetching}
+          <div style="text-align:center; margin-top: 1rem;">
+            <Spinner secondary />
+          </div>
+        {:else 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>
@@ -220,5 +217,4 @@
       </td>
     {/key}
   {/each}
-  {/if}
 </tr>