keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2024-11-17 06:19:27 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve technician widgets loading

Browse source
This commit is contained in:
Keannu Bernasol 2024-01-07 12:30:34 +08:00
parent e589588d8c
commit 8382f7a40e
1 changed files with 6 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/Components/DashboardPage/Technician/TechnicianWidgets.tsx
View file

@ -6,7 +6,6 @@ import {
UserAPI, UserAPI,
TransactionsAPI, TransactionsAPI,
} from "../../API/API"; } from "../../API/API";
import CircularProgress from "@mui/material/CircularProgress";
import moment from "moment"; import moment from "moment";
export default function TechnicianWidgets() { 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 ( return (
<div style={styles.flex_column}> <div style={styles.flex_column}>
<div <div
@ -94,7 +75,7 @@ export default function TechnicianWidgets() {
> >
{queries[1].data?.filter( {queries[1].data?.filter(
(equipment) => equipment.status == "Pending" (equipment) => equipment.status == "Pending"
).length || 0} ).length || "Loading..."}
</p> </p>
</div> </div>
<div <div
@ -125,7 +106,7 @@ export default function TechnicianWidgets() {
...styles.text_L, ...styles.text_L,
}} }}
> >
{queries[1].data?.length || 0} {queries[1].data?.length || "Loading..."}
</p> </p>
</div> </div>
</div> </div>
@ -169,7 +150,7 @@ export default function TechnicianWidgets() {
> >
{queries[1].data?.filter( {queries[1].data?.filter(
(equipment) => equipment.status == "Available" (equipment) => equipment.status == "Available"
).length || 0} ).length || "Loading..."}
</p> </p>
</div> </div>
<div <div
@ -202,7 +183,7 @@ export default function TechnicianWidgets() {
> >
{queries[1].data?.filter( {queries[1].data?.filter(
(equipment) => equipment.status == "Broken" (equipment) => equipment.status == "Broken"
).length || 0} ).length || "Loading..."}
</p> </p>
</div> </div>
</div> </div>
@ -249,7 +230,7 @@ export default function TechnicianWidgets() {
todayStartOfDay, todayStartOfDay,
todayEndOfDay todayEndOfDay
) )
).length || 0} ).length || "Loading..."}
</p> </p>
</div> </div>
<div <div
@ -285,7 +266,7 @@ export default function TechnicianWidgets() {
thisMonthStart, thisMonthStart,
thisMonthEnd thisMonthEnd
) )
).length || 0} ).length || "Loading..."}
</p> </p>
</div> </div>
</div> </div>