Further simplified the dashboard page and moved functionality to separate components

src/Components/DashboardPage/TechnicianButtons.tsx

@@ -1,6 +1,4 @@
-import { useQueries } from "@tanstack/react-query";
 import styles from "../../styles";
-import { EquipmentsAPI, EquipmentInstancesAPI, UserAPI } from "../API/API";
 import { useNavigate } from "react-router-dom";
 import { Button } from "@mui/material";
 import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
@@ -18,22 +16,6 @@ export default function TechnicianButtons() {
   const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false);
   const [additemmodalOpen, SetAddItemModalOpen] = useState(false);
   const navigate = useNavigate();
-  const queries = useQueries({
-    queries: [
-      {
-        queryKey: ["equipments"],
-        queryFn: EquipmentsAPI,
-      },
-      {
-        queryKey: ["equipment_instances"],
-        queryFn: EquipmentInstancesAPI,
-      },
-      {
-        queryKey: ["user"],
-        queryFn: UserAPI,
-      },
-    ],
-  });
   return (
     <>
       <p
@@ -61,10 +43,6 @@ export default function TechnicianButtons() {
               alignSelf: "center",
               justifyContent: "center",
               flexWrap: "wrap",
-              display:
-                queries[2].data && queries[2].data.is_technician
-                  ? "initial"
-                  : "none",
             },
           }}
           onClick={() => {

src/Components/DashboardPage/TechnicianWidgets.tsx

@@ -1,6 +1,7 @@
 import { useQueries } from "@tanstack/react-query";
 import styles from "../../styles";
 import { EquipmentsAPI, EquipmentInstancesAPI, UserAPI } from "../API/API";
+import CircularProgress from "@mui/material/CircularProgress";
 
 export default function TechnicianWidgets() {
   const queries = useQueries({
@@ -19,6 +20,22 @@ export default function TechnicianWidgets() {
       },
     ],
   });
+  const isLoading = queries.some((result) => result.isLoading);
+  if (isLoading) {
+    return (
+      <>
+        <CircularProgress style={{ height: "128px", width: "128px" }} />
+        <p
+          style={{
+            ...styles.text_dark,
+            ...styles.text_L,
+          }}
+        >
+          Loading
+        </p>
+      </>
+    );
+  }
   return (
     <div style={styles.flex_column}>
       <div

src/Components/RestrictedComponent/RestrictedComponent.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { UserAPI } from "../API/API";
 import { useQuery } from "@tanstack/react-query";
+import { CircularProgress } from "@mui/material";
+import styles from "../../styles";
 
 type props = {
   allow_only: string;
@@ -8,6 +10,21 @@ type props = {
 };
 export default function RestrictedComponent(props: props) {
   const user = useQuery({ queryKey: ["user"], queryFn: UserAPI });
+  if (user.isLoading) {
+    return (
+      <>
+        <CircularProgress style={{ height: "128px", width: "128px" }} />
+        <p
+          style={{
+            ...styles.text_dark,
+            ...styles.text_L,
+          }}
+        >
+          Loading
+        </p>
+      </>
+    );
+  }
   if (props.allow_only === "Teacher") {
     if (user.data && user.data.is_teacher) {
       return <>{props.children}</>;

src/Pages/DashboardPage/DashboardPage.tsx

@@ -1,62 +1,10 @@
 import Header from "../../Components/Header/Header";
 import styles from "../../styles";
-import { useQueries } from "@tanstack/react-query";
-import {
-  EquipmentsAPI,
-  EquipmentInstancesAPI,
-  UserAPI,
-} from "../../Components/API/API";
 import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent";
 import TechnicianWidgets from "../../Components/DashboardPage/TechnicianWidgets";
 import TechnicianButtons from "../../Components/DashboardPage/TechnicianButtons";
 import TechnicianLogs from "../../Components/DashboardPage/TechnicianLogs";
-import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
 export default function Dashboard() {
-  const queries = useQueries({
-    queries: [
-      {
-        queryKey: ["equipments"],
-        queryFn: EquipmentsAPI,
-      },
-      {
-        queryKey: ["equipment_instances"],
-        queryFn: EquipmentInstancesAPI,
-      },
-      {
-        queryKey: ["user"],
-        queryFn: UserAPI,
-      },
-    ],
-  });
-  const isLoading = queries.some((result) => result.isLoading);
-
-  if (isLoading) {
-    return (
-      <div style={styles.background}>
-        <Header label={"Dashboard"} />
-        <div
-          style={{
-            ...styles.flex_column,
-            ...{
-              alignItems: "center",
-              justifyContent: "center",
-              paddingTop: "64px",
-            },
-          }}
-        >
-          <CircularProgress style={{ height: "128px", width: "128px" }} />
-          <p
-            style={{
-              ...styles.text_dark,
-              ...styles.text_L,
-            }}
-          >
-            Loading
-          </p>
-        </div>
-      </div>
-    );
-  }
   return (
     <div style={styles.background}>
       <Header label={"Dashboard"} />