Fix multiple re-renders of metrics page

caioricciuti · May 18, 2024 · 18b74d4 · 18b74d4
1 parent 915dcd7
commit 18b74d4
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 30 deletions.
diff --git a/src/pages/InstanceMetricsPage.jsx b/src/pages/InstanceMetricsPage.jsx
@@ -18,21 +18,14 @@ import { toast } from "sonner";
 
 export default function InstanceMetricsPage() {
   const { theme } = useTheme();
-  const {
-    isServerAvailable,
-    isLoading,
-    setIsLoading,
-    getDataAnalytics,
-    analyticsData,
-  } = useClickHouseState();
+  const { isServerAvailable, isLoading, getDataAnalytics, analyticsData } =
+    useClickHouseState();
 
   useEffect(() => {
-    setIsLoading(true);
-    if (isServerAvailable && !analyticsData.length) {
+    if (isServerAvailable && !isLoading && !analyticsData.length) {
       getDataAnalytics();
     }
-    setIsLoading(false);
-  }, [isServerAvailable, analyticsData.length]);
+  }, [isServerAvailable, isLoading, analyticsData.length]);
 
   const formatNumber = (number) => new Intl.NumberFormat().format(number);
   const formatTime = (seconds) =>

diff --git a/src/providers/ClickHouseContext.jsx b/src/providers/ClickHouseContext.jsx
@@ -69,26 +69,28 @@ const ClickHouseProvider = ({ children }) => {
 
   const getDataAnalytics = useCallback(async () => {
     setIsLoading(true);
+
     try {
-      analyticsQueries.forEach(async (element) => {
-        const response = await clickHouseClient.current.query({
-          query: element.query,
-          format: element.format,
-        });
-        const data = await response.json();
-        const formatForArray = {
-          data: data,
-          title: element.title,
-          plot: element.plot,
-          description: element.description,
-          data_format: element.data_format,
-          query: element.query,
-          format: element.format,
-        };
-        setAnalyticsData((prev) => {
-          return [...prev, formatForArray];
-        });
-      });
+      const newAnalyticsData = await Promise.all(
+        analyticsQueries.map(async (element) => {
+          const response = await clickHouseClient.current.query({
+            query: element.query,
+            format: element.format,
+          });
+          const data = await response.json();
+          return {
+            data: data,
+            title: element.title,
+            plot: element.plot,
+            description: element.description,
+            data_format: element.data_format,
+            query: element.query,
+            format: element.format,
+          };
+        })
+      );
+
+      setAnalyticsData(newAnalyticsData);
     } catch (error) {
       setError(`Data analytics fetch failed: ${error.message}`);
       toast.error(error.message);