Loading shimmer for settings

1 files changed, 14 insertions, 7 deletions

diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js
index 7569e7bf..da77be7e 100644
--- a/modern/src/settings/MaintenancesPage.js
+++ b/modern/src/settings/MaintenancesPage.js
@@ -12,6 +12,7 @@ import PageLayout from '../common/components/PageLayout';
 import SettingsMenu from './components/SettingsMenu';
 import CollectionFab from './components/CollectionFab';
 import CollectionActions from './components/CollectionActions';
+import TableShimmer from '../common/components/TableShimmer';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
@@ -28,15 +29,21 @@ const MaintenacesPage = () => {
 
   const [timestamp, setTimestamp] = useState(Date.now());
   const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
   const speedUnit = useAttributePreference('speedUnit');
   const distanceUnit = useAttributePreference('distanceUnit');
 
   useEffectAsync(async () => {
-    const response = await fetch('/api/maintenance');
-    if (response.ok) {
-      setItems(await response.json());
-    } else {
-      throw Error(await response.text());
+    setLoading(true);
+    try {
+      const response = await fetch('/api/maintenance');
+      if (response.ok) {
+        setItems(await response.json());
+      } else {
+        throw Error(await response.text());
+      }
+    } finally {
+      setLoading(false);
     }
   }, [timestamp]);
 
@@ -69,7 +76,7 @@ const MaintenacesPage = () => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {items.map((item) => (
+          {!loading ? items.map((item) => (
             <TableRow key={item.id}>
               <TableCell>{item.name}</TableCell>
               <TableCell>{item.type}</TableCell>
@@ -79,7 +86,7 @@ const MaintenacesPage = () => {
                 <CollectionActions itemId={item.id} editPath="/settings/maintenance" endpoint="maintenance" setTimestamp={setTimestamp} />
               </TableCell>
             </TableRow>
-          ))}
+          )) : (<TableShimmer columns={5} />)}
         </TableBody>
       </Table>
       <CollectionFab editPath="/settings/maintenance" />