Merge pull request #650 from kbss-cvut/fix/render-loading-icon-overvi…

…ew-tables Render loading icon system and fault tree overviews
kbss-cvut · Nov 5, 2024 · 62442f7 · 62442f7
2 parents 8c20357 + e201925
commit 62442f7
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 16 deletions.
diff --git a/src/components/dashboard/content/list/FaultTreeAndSystemOverviewCardsList.tsx b/src/components/dashboard/content/list/FaultTreeAndSystemOverviewCardsList.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useState } from "react";
-import { Box, Grid, Typography, Button, useTheme } from "@mui/material";
+import { Box, Grid, Typography, Button, useTheme, CircularProgress } from "@mui/material";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import useStyles from "./FaultTreeOverviewCardsList.styles";
 import { useTranslation } from "react-i18next";
@@ -16,6 +16,7 @@ const borderHover = "1px solid #60A3D9";
 interface FaultTreeOverviewCardsListProps {
   faultTrees?: FaultTree[];
   systems?: System[];
+  loading: boolean;
   handleFaultTreeContextMenu?: (evt: any, faultTree: FaultTree) => void;
   handleSystemContextMenu?: (evt: any, system: System) => void;
   selectedSystem: System | null;
@@ -33,6 +34,7 @@ interface CardProps {
 const FaultTreeAndSystemOverviewCardsList: FC<FaultTreeOverviewCardsListProps> = ({
   faultTrees,
   systems,
+  loading,
   handleFaultTreeContextMenu,
   handleSystemContextMenu,
   selectedSystem,
@@ -69,7 +71,12 @@ const FaultTreeAndSystemOverviewCardsList: FC<FaultTreeOverviewCardsListProps> =
       </Grid>
     );
   };
-
+  if (loading)
+    return (
+      <div style={{ display: "flex", height: "50vh", alignItems: "center", justifyContent: "center" }}>
+        <CircularProgress style={{ alignContent: "center" }} size={100} />
+      </div>
+    );
   return (
     <Box style={{ flex: 1 }}>
       <Grid container spacing={2} className={classes.grid}>

diff --git a/src/components/dashboard/content/list/FaultTreeOverview.tsx b/src/components/dashboard/content/list/FaultTreeOverview.tsx
@@ -20,7 +20,7 @@ import { asArray } from "@utils/utils";
 const FaultTreeOverview = () => {
   const { t } = useTranslation();
   const [showConfirmDialog] = useConfirmDialog();
-  const [faultTrees, , , removeTree, triggerFetch] = useFaultTrees();
+  const [faultTrees, , , removeTree, loading, triggerFetch] = useFaultTrees();
 
   const [selectedView, setSelectedView] = useState<ViewType>("table");
   const [editDialogOpen, setEditDialogOpen] = useState<boolean>(false);
@@ -106,6 +106,7 @@ const FaultTreeOverview = () => {
         <FaultTreeAndSystemOverviewTable
           selectedSystem={selectedSystem}
           faultTrees={faultTrees}
+          loading={loading}
           handleFaultTreeContextMenu={handleContextMenu}
           handleFilterChange={handleFilterChange}
           sortConfig={sortConfig}
@@ -115,6 +116,7 @@ const FaultTreeOverview = () => {
         <FaultTreeAndSystemOverviewCardsList
           selectedSystem={selectedSystem}
           faultTrees={faultTrees}
+          loading={loading}
           handleFaultTreeContextMenu={handleContextMenu}
         />
       )}

diff --git a/src/components/dashboard/content/list/SystemOverview.tsx b/src/components/dashboard/content/list/SystemOverview.tsx
@@ -18,7 +18,7 @@ import { useSelectedSystemSummaries } from "@hooks/useSelectedSystemSummaries";
 const SystemOverview = () => {
   const { t } = useTranslation();
   const [showConfirmDialog] = useConfirmDialog();
-  const [systems, , , removeSystem, triggerFetch] = useSystems();
+  const [systems, , , removeSystem, loading, triggerFetch] = useSystems();
 
   const [selectedView, setSelectedView] = useState<ViewType>("table");
   const [contextMenuSelectedSystem, setContextMenuSelectedSystem] = useState<System>(null);
@@ -73,11 +73,16 @@ const SystemOverview = () => {
       </Box>
 
       {selectedView === "table" ? (
-        <FaultTreeAndSystemOverviewTable systems={systems} handleSystemContextMenu={handleContextMenu} />
+        <FaultTreeAndSystemOverviewTable
+          loading={loading}
+          systems={systems}
+          handleSystemContextMenu={handleContextMenu}
+        />
       ) : (
         <FaultTreeAndSystemOverviewCardsList
           selectedSystem={selectedSystem}
           systems={systems}
+          loading={loading}
           handleSystemContextMenu={handleContextMenu}
         />
       )}

diff --git a/src/components/table/FaultTreeAndSystemOverviewTable.tsx b/src/components/table/FaultTreeAndSystemOverviewTable.tsx
@@ -25,6 +25,7 @@ import SystemTableHead from "./SystemTableHead";
 interface FaultTreeOverviewTableProps {
   faultTrees?: FaultTree[];
   systems?: System[];
+  loading: boolean;
   handleFaultTreeContextMenu?: (evt: any, faultTree: FaultTree) => void;
   handleSystemContextMenu?: (evt: any, system: System) => void;
   handleFilterChange?: (label: string, snsLabel: string) => Promise<void>;
@@ -36,6 +37,7 @@ interface FaultTreeOverviewTableProps {
 const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
   faultTrees,
   systems,
+  loading,
   handleFaultTreeContextMenu,
   handleSystemContextMenu,
   handleFilterChange,
@@ -45,7 +47,6 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
 }) => {
   const { classes } = useStyles();
   const [selectedSystemState, setSelectedSystem] = useSelectedSystemSummaries();
-  const [loading, setLoading] = useState(false);
 
   const [filterAnchorEl, setFilterAnchorEl] = useState<null | HTMLElement>(null);
   const [filterType, setFilterType] = useState<null | string>(null);
@@ -91,8 +92,12 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
           <TableBody>
             {loading ? (
               <TableRow>
-                <TableCell colSpan={10}>
-                  <CircularProgress />
+                <TableCell
+                  style={{ borderBottom: "none", verticalAlign: "middle", height: "50vh" }}
+                  colSpan={10}
+                  align={"center"}
+                >
+                  <CircularProgress size={100} />
                 </TableCell>
               </TableRow>
             ) : (

diff --git a/src/hooks/useFaultTrees.tsx b/src/hooks/useFaultTrees.tsx
@@ -10,18 +10,20 @@ type faultTreeContextType = [
   (faultTree: FaultTree) => void,
   (faultTreeToUpdate: FaultTree) => void,
   (faultTreeToDelete: FaultTree) => void,
+  boolean,
   (filters?: { label?: string; snsLabel?: string; sort?: string }) => void,
 ];
 
 export const faultTreesContext = createContext<faultTreeContextType>(null!);
 
 export const useFaultTrees = () => {
-  const [faultTrees, addFaultTree, updateTree, removeTree, triggerFetch] = useContext(faultTreesContext);
-  return [faultTrees, addFaultTree, updateTree, removeTree, triggerFetch] as const;
+  const [faultTrees, addFaultTree, updateTree, removeTree, loading, triggerFetch] = useContext(faultTreesContext);
+  return [faultTrees, addFaultTree, updateTree, removeTree, loading, triggerFetch] as const;
 };
 
 export const FaultTreesProvider = ({ children }) => {
   const [_faultTrees, _setFaultTrees] = useState<FaultTree[]>([]);
+  const [_loading, _setLoading] = useState(false);
   const [showSnackbar] = useSnackbar();
   const loggedUser = useUserAuth();
 
@@ -31,10 +33,11 @@ export const FaultTreesProvider = ({ children }) => {
       if (filters?.label) params.label = filters.label;
       if (filters?.snsLabel) params.snsLabel = filters.snsLabel;
       if (filters?.sort) params.sort = filters.sort;
-
+      _setLoading(true);
       faultTreeService
         .findAllWithFilters(params)
         .then((value) => {
+          _setLoading(false);
           _setFaultTrees(value);
         })
         .catch((reason) => showSnackbar(reason, SnackbarType.ERROR));
@@ -77,7 +80,7 @@ export const FaultTreesProvider = ({ children }) => {
   };
 
   return (
-    <faultTreesContext.Provider value={[_faultTrees, addFaultTree, updateTree, removeTree, triggerFetch]}>
+    <faultTreesContext.Provider value={[_faultTrees, addFaultTree, updateTree, removeTree, _loading, triggerFetch]}>
       {children}
     </faultTreesContext.Provider>
   );

diff --git a/src/hooks/useSystems.tsx b/src/hooks/useSystems.tsx
@@ -14,31 +14,38 @@ type systemContextType = [
   (systemToCreate: System) => void,
   (systemToDelete: System, onSuccess: () => void, onFail: () => void) => void,
   (systemToUpdate: System) => void,
+  boolean,
   () => void,
 ];
 
 export const systemContext = createContext<systemContextType>(null!);
 
 export const useSystems = () => {
-  const [systems, addSystem, updateSystem, removeSystem, triggerFetch] = useContext(systemContext);
-  return [systems, addSystem, updateSystem, removeSystem, triggerFetch] as const;
+  const [systems, addSystem, updateSystem, removeSystem, loading, triggerFetch] = useContext(systemContext);
+  return [systems, addSystem, updateSystem, removeSystem, loading, triggerFetch] as const;
 };
 
 export const SystemsProvider = ({ children }: ChildrenProps) => {
   const [_systems, _setSystems] = useState<System[]>([]);
+  const [_loading, _setLoading] = useState<boolean>(false);
   const [showSnackbar] = useSnackbar();
   const loggedUser = useUserAuth();
   const [shouldFetchSystems, setShouldFetchSystems] = useState(true);
 
   useEffect(() => {
     const fetchSystems = async () => {
+      _setLoading(true);
       systemService
         .findAll()
         .then((value) => {
+          _setLoading(false);
           _setSystems(value);
           setShouldFetchSystems(false);
         })
-        .catch((reason) => showSnackbar(reason, SnackbarType.ERROR));
+        .catch((reason) => {
+          _setLoading(false);
+          showSnackbar(reason, SnackbarType.ERROR);
+        });
     };
 
     if (loggedUser && shouldFetchSystems) fetchSystems();
@@ -88,7 +95,7 @@ export const SystemsProvider = ({ children }: ChildrenProps) => {
   const triggerFetch = () => setShouldFetchSystems(true);
 
   return (
-    <systemContext.Provider value={[_systems, addSystem, updateSystem, removeSystem, triggerFetch]}>
+    <systemContext.Provider value={[_systems, addSystem, updateSystem, removeSystem, _loading, triggerFetch]}>
       {children}
     </systemContext.Provider>
   );