From 056d487f1cba1fe437001a861a4c47e1657e4e53 Mon Sep 17 00:00:00 2001
From: Cesar N <ces.nietor@gmail.com>
Date: Wed, 19 Apr 2023 21:06:16 -0700
Subject: [PATCH] Show progress bar when loading Usage Info (#2784)

---
 .../screens/Console/Dashboard/Prometheus/PrDashboard.tsx  | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
index 1e2aacff3..ba6f85eb5 100644
--- a/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
@@ -63,6 +63,9 @@ const styles = (theme: Theme) =>
 
 const PrDashboard = ({ apiPrefix = "admin", usage }: IPrDashboard) => {
   const dispatch = useAppDispatch();
+  const loadingUsage = useSelector(
+    (state: AppState) => state.dashboard.loadingUsage
+  );
   const zoomOpen = useSelector(
     (state: AppState) => state.dashboard.zoom.openZoom
   );
@@ -237,6 +240,7 @@ const PrDashboard = ({ apiPrefix = "admin", usage }: IPrDashboard) => {
                       onClick={() => {
                         dispatch(getUsageAsync());
                       }}
+                      disabled={loadingUsage}
                       icon={<SyncIcon />}
                       label={"Sync"}
                     />
@@ -328,8 +332,8 @@ const PrDashboard = ({ apiPrefix = "admin", usage }: IPrDashboard) => {
           index={usage?.advancedMetricsStatus === "not configured" ? 0 : 3}
           value={curTab}
         >
-          {!usage && <LinearProgress />}
-          {usage && <BasicDashboard usage={usage} />}
+          {(!usage || loadingUsage) && <LinearProgress />}
+          {usage && !loadingUsage && <BasicDashboard usage={usage} />}
         </TabPanel>
       </Grid>
     </PageLayout>