From 8382f7a40ed9ebd0ef4cc6ddfd5220632229993e Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Sun, 7 Jan 2024 12:30:34 +0800
Subject: [PATCH] Improve technician widgets loading

---
 .../Technician/TechnicianWidgets.tsx          | 31 ++++---------------
 1 file changed, 6 insertions(+), 25 deletions(-)

diff --git a/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx b/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx
index 65726b0..b412176 100644
--- a/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx
+++ b/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx
@@ -6,7 +6,6 @@ import {
   UserAPI,
   TransactionsAPI,
 } from "../../API/API";
-import CircularProgress from "@mui/material/CircularProgress";
 import moment from "moment";
 
 export default function TechnicianWidgets() {
@@ -34,24 +33,6 @@ export default function TechnicianWidgets() {
       },
     ],
   });
-  const isLoading = queries.some((result) => result.isLoading);
-  if (isLoading) {
-    return (
-      <>
-        <CircularProgress
-          style={{ marginTop: "8px", height: "128px", width: "128px" }}
-        />
-        <p
-          style={{
-            ...styles.text_dark,
-            ...styles.text_L,
-          }}
-        >
-          Loading widgets...
-        </p>
-      </>
-    );
-  }
   return (
     <div style={styles.flex_column}>
       <div
@@ -94,7 +75,7 @@ export default function TechnicianWidgets() {
           >
             {queries[1].data?.filter(
               (equipment) => equipment.status == "Pending"
-            ).length || 0}
+            ).length || "Loading..."}
           </p>
         </div>
         <div
@@ -125,7 +106,7 @@ export default function TechnicianWidgets() {
               ...styles.text_L,
             }}
           >
-            {queries[1].data?.length || 0}
+            {queries[1].data?.length || "Loading..."}
           </p>
         </div>
       </div>
@@ -169,7 +150,7 @@ export default function TechnicianWidgets() {
           >
             {queries[1].data?.filter(
               (equipment) => equipment.status == "Available"
-            ).length || 0}
+            ).length || "Loading..."}
           </p>
         </div>
         <div
@@ -202,7 +183,7 @@ export default function TechnicianWidgets() {
           >
             {queries[1].data?.filter(
               (equipment) => equipment.status == "Broken"
-            ).length || 0}
+            ).length || "Loading..."}
           </p>
         </div>
       </div>
@@ -249,7 +230,7 @@ export default function TechnicianWidgets() {
                 todayStartOfDay,
                 todayEndOfDay
               )
-            ).length || 0}
+            ).length || "Loading..."}
           </p>
         </div>
         <div
@@ -285,7 +266,7 @@ export default function TechnicianWidgets() {
                 thisMonthStart,
                 thisMonthEnd
               )
-            ).length || 0}
+            ).length || "Loading..."}
           </p>
         </div>
       </div>