refactor: MetricPlot loading state management inside component (#5)

* refactor: Loading state management inside MetricsPlot component * fix: remove console.log in MetricsPlot * fix: flick when selecting node
aleph-im · Mar 25, 2024 · a8bf9f3 · a8bf9f3
1 parent 5fd1365
commit a8bf9f3
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 22 deletions.
diff --git a/src/components/MetricsPlot.tsx b/src/components/MetricsPlot.tsx
@@ -1,13 +1,19 @@
 import React from "react";
 import Plot from "react-plotly.js";
 import { Data } from "plotly.js";
+import ProgressBar from "./ProgressBar";
 
 interface MetricsPlotProps {
+  isLoadingMetrics: boolean;
   plotData: Data[];
   layout: Partial<Plotly.Layout>;
 }
 
-const MetricsPlot: React.FC<MetricsPlotProps> = ({ plotData, layout }) => {
+const MetricsPlot: React.FC<MetricsPlotProps> = ({
+  isLoadingMetrics,
+  plotData,
+  layout,
+}) => {
   const extendedLayout: Partial<Plotly.Layout> = {
     ...layout,
     xaxis: {
@@ -39,16 +45,23 @@ const MetricsPlot: React.FC<MetricsPlotProps> = ({ plotData, layout }) => {
     },
   };
 
-  console.log(extendedLayout);
-
   return (
-    <Plot
-      data={plotData}
-      layout={extendedLayout}
-      config={{ responsive: true }}
-      useResizeHandler={true}
-      style={{ width: "100%", height: "100%" }}
-    />
+    <>
+      {isLoadingMetrics ? (
+        <div>
+          Loading metrics...
+          <ProgressBar isLoading={isLoadingMetrics} loadDuration={12000} />
+        </div>
+      ) : (
+        <Plot
+          data={plotData}
+          layout={extendedLayout}
+          config={{ responsive: true }}
+          useResizeHandler={true}
+          style={{ width: "100%", height: "100%" }}
+        />
+      )}
+    </>
   );
 };
 

diff --git a/src/hooks/useFetchMetrics.ts b/src/hooks/useFetchMetrics.ts
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { MetricData, Node } from "../types";
 
 const useFetchMetrics = (selectedNode: Node | undefined, nodes: Node[]) => {
-  const [isLoadingMetrics, setIsLoadingMetrics] = useState(false);
+  const [isLoadingMetrics, setIsLoadingMetrics] = useState(true);
   const [metricData, setMetricData] = useState<MetricData | null>(null);
 
   useEffect(() => {

diff --git a/src/pages/NodeMetricsPage.tsx b/src/pages/NodeMetricsPage.tsx
@@ -5,7 +5,6 @@ import useFetchNodes from "../hooks/useFetchNodes";
 import useFetchMetrics from "../hooks/useFetchMetrics";
 import useFilteredNodes from "../hooks/useFilteredNodes";
 import { MetricData, Node } from "../types";
-import ProgressBar from "../components/ProgressBar";
 import NodeList from "../components/NodeList";
 import { Spinner } from "@aleph-front/core";
 
@@ -92,17 +91,14 @@ const NodeMetricsPage: React.FC = () => {
       ></NodeList>
       <div className="flex flex-col items-center justify-center w-full h-[calc(100vh-77px)] p-8 z-30 bg-white text-black">
         <div className="flex flex-grow items-center justify-center w-full h-max">
-          {isLoadingMetrics ? (
-            <div>
-              Loading metrics...
-              <ProgressBar isLoading={isLoadingMetrics} loadDuration={12000} />
-            </div>
-          ) : metricData ? (
-            <>
-              <MetricsPlot plotData={plotData} layout={plotLayout} />
-            </>
-          ) : isLoadingNodes ? (
+          {isLoadingNodes ? (
             <Spinner color="#141327" />
+          ) : selectedNode ? (
+            <MetricsPlot
+              isLoadingMetrics={isLoadingMetrics}
+              plotData={plotData}
+              layout={plotLayout}
+            />
           ) : (
             <div className="text-gray-500">
               Select a node to see its metrics.