From 19c68fddb70e73107de6a0d3392b87c14adaa11c Mon Sep 17 00:00:00 2001
From: manu <facos86@gmail.com>
Date: Mon, 15 Jul 2024 14:29:32 +0200
Subject: [PATCH] Update loading state in MainChartCard

The loading state in MainChartCard has been updated to reflect the latest data fetching status. The previous code used a hardcoded timeout to set loading to false which was removed. A loading spinner from Ant Design was added to provide a better visual feedback when fetching the data.
---
 .../pages/Dashboard/Components/MainChartCard.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/src/pages/Dashboard/Components/MainChartCard.tsx b/client/src/pages/Dashboard/Components/MainChartCard.tsx
index bfa0b506..d64eeaf3 100644
--- a/client/src/pages/Dashboard/Components/MainChartCard.tsx
+++ b/client/src/pages/Dashboard/Components/MainChartCard.tsx
@@ -1,7 +1,9 @@
+import { LoadingOutlined } from '@ant-design/icons';
 import {
   Card,
   Col,
   DatePicker,
+  Flex,
   Row,
   Select,
   Tabs,
@@ -83,9 +85,7 @@ const MainChartCard: React.FC<any> = ({}) => {
           console.log('fetch data failed', error);
         });
     }
-    setTimeout(() => {
-      setLoading(false);
-    }, 5000);
+    setLoading(false);
   };
 
   useEffect(() => {
@@ -96,13 +96,21 @@ const MainChartCard: React.FC<any> = ({}) => {
   const config = {
     data: graphData,
     // Waiting for https://github.com/ant-design/ant-design-charts/issues/2580
-    //loading: loading,
+    loading: loading,
     animate: { enter: { type: 'waveIn' } },
     theme: {
       view: {
         viewFill: '#151921',
       },
     },
+    loadingTemplate: (
+      <Flex
+        justify={'center'}
+        style={{ backgroundColor: '#151921', width: '100%', height: '100%' }}
+      >
+        <LoadingOutlined style={{ fontSize: '32px' }} />
+      </Flex>
+    ),
     xField: 'date',
     yField: 'value',
     colorField: 'name',