Loading shimmer for settings

9 files changed, 126 insertions, 56 deletions

diff --git a/modern/src/common/components/TableShimmer.js b/modern/src/common/components/TableShimmer.js
new file mode 100644
index 00000000..3208551f
--- /dev/null
+++ b/modern/src/common/components/TableShimmer.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Skeleton, TableCell, TableRow } from '@mui/material';
+
+const TableShimmer = ({ columns }) => [...Array(3)].map(() => (
+  <TableRow>
+    {[...Array(columns)].map(() => (
+      <TableCell>
+        <Skeleton />
+      </TableCell>
+    ))}
+  </TableRow>
+));
+
+export default TableShimmer;
diff --git a/modern/src/settings/CalendarsPage.js b/modern/src/settings/CalendarsPage.js
index ea28967c..e46fe8f1 100644
--- a/modern/src/settings/CalendarsPage.js
+++ b/modern/src/settings/CalendarsPage.js
@@ -9,6 +9,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: {
@@ -23,13 +24,19 @@ const CalendarsPage = () => {
 
   const [timestamp, setTimestamp] = useState(Date.now());
   const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
 
   useEffectAsync(async () => {
-    const response = await fetch('/api/calendars');
-    if (response.ok) {
-      setItems(await response.json());
-    } else {
-      throw Error(await response.text());
+    setLoading(true);
+    try {
+      const response = await fetch('/api/calendars');
+      if (response.ok) {
+        setItems(await response.json());
+      } else {
+        throw Error(await response.text());
+      }
+    } finally {
+      setLoading(false);
     }
   }, [timestamp]);
 
@@ -43,14 +50,14 @@ const CalendarsPage = () => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {items.map((item) => (
+          {!loading ? items.map((item) => (
             <TableRow key={item.id}>
               <TableCell>{item.name}</TableCell>
               <TableCell className={classes.columnAction} padding="none">
                 <CollectionActions itemId={item.id} editPath="/settings/calendar" endpoint="calendars" setTimestamp={setTimestamp} />
               </TableCell>
             </TableRow>
-          ))}
+          )) : (<TableShimmer columns={2} />)}
         </TableBody>
       </Table>
       <CollectionFab editPath="/settings/calendar" />
diff --git a/modern/src/settings/CommandsPage.js b/modern/src/settings/CommandsPage.js
index 5ff194d5..3963952b 100644
--- a/modern/src/settings/CommandsPage.js
+++ b/modern/src/settings/CommandsPage.js
@@ -11,6 +11,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: {
@@ -25,13 +26,19 @@ const CommandsPage = () => {
 
   const [timestamp, setTimestamp] = useState(Date.now());
   const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
 
   useEffectAsync(async () => {
-    const response = await fetch('/api/commands');
-    if (response.ok) {
-      setItems(await response.json());
-    } else {
-      throw Error(await response.text());
+    setLoading(true);
+    try {
+      const response = await fetch('/api/commands');
+      if (response.ok) {
+        setItems(await response.json());
+      } else {
+        throw Error(await response.text());
+      }
+    } finally {
+      setLoading(false);
     }
   }, [timestamp]);
 
@@ -47,7 +54,7 @@ const CommandsPage = () => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {items.map((item) => (
+          {!loading ? items.map((item) => (
             <TableRow key={item.id}>
               <TableCell>{item.description}</TableCell>
               <TableCell>{t(prefixString('command', item.type))}</TableCell>
@@ -56,7 +63,7 @@ const CommandsPage = () => {
                 <CollectionActions itemId={item.id} editPath="/settings/command" endpoint="commands" setTimestamp={setTimestamp} />
               </TableCell>
             </TableRow>
-          ))}
+          )) : (<TableShimmer columns={4} />)}
         </TableBody>
       </Table>
       <CollectionFab editPath="/settings/command" />
diff --git a/modern/src/settings/ComputedAttributesPage.js b/modern/src/settings/ComputedAttributesPage.js
index 5de79dc0..952ea677 100644
--- a/modern/src/settings/ComputedAttributesPage.js
+++ b/modern/src/settings/ComputedAttributesPage.js
@@ -10,6 +10,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: {
@@ -24,14 +25,20 @@ const ComputedAttributesPage = () => {
 
   const [timestamp, setTimestamp] = useState(Date.now());
   const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
   const administrator = useAdministrator();
 
   useEffectAsync(async () => {
-    const response = await fetch('/api/attributes/computed');
-    if (response.ok) {
-      setItems(await response.json());
-    } else {
-      throw Error(await response.text());
+    setLoading(true);
+    try {
+      const response = await fetch('/api/attributes/computed');
+      if (response.ok) {
+        setItems(await response.json());
+      } else {
+        throw Error(await response.text());
+      }
+    } finally {
+      setLoading(false);
     }
   }, [timestamp]);
 
@@ -48,7 +55,7 @@ const ComputedAttributesPage = () => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {items.map((item) => (
+          {!loading ? items.map((item) => (
             <TableRow key={item.id}>
               <TableCell>{item.description}</TableCell>
               <TableCell>{item.attribute}</TableCell>
@@ -60,7 +67,7 @@ const ComputedAttributesPage = () => {
                 </TableCell>
               )}
             </TableRow>
-          ))}
+          )) : (<TableShimmer columns={administrator ? 5 : 4} />)}
         </TableBody>
       </Table>
       <CollectionFab editPath="/settings/attribute" />
diff --git a/modern/src/settings/DriversPage.js b/modern/src/settings/DriversPage.js
index cdff5488..7700f5cd 100644
--- a/modern/src/settings/DriversPage.js
+++ b/modern/src/settings/DriversPage.js
@@ -9,6 +9,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: {
@@ -23,13 +24,19 @@ const DriversPage = () => {
 
   const [timestamp, setTimestamp] = useState(Date.now());
   const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
 
   useEffectAsync(async () => {
-    const response = await fetch('/api/drivers');
-    if (response.ok) {
-      setItems(await response.json());
-    } else {
-      throw Error(await response.text());
+    setLoading(true);
+    try {
+      const response = await fetch('/api/drivers');
+      if (response.ok) {
+        setItems(await response.json());
+      } else {
+        throw Error(await response.text());
+      }
+    } finally {
+      setLoading(false);
     }
   }, [timestamp]);
 
@@ -44,7 +51,7 @@ const DriversPage = () => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {items.map((item) => (
+          {!loading ? items.map((item) => (
             <TableRow key={item.id}>
               <TableCell>{item.name}</TableCell>
               <TableCell>{item.uniqueId}</TableCell>
@@ -52,7 +59,7 @@ const DriversPage = () => {
                 <CollectionActions itemId={item.id} editPath="/settings/driver" endpoint="drivers" setTimestamp={setTimestamp} />
               </TableCell>
             </TableRow>
-          ))}
+          )) : (<TableShimmer columns={3} />)}
         </TableBody>
       </Table>
       <CollectionFab editPath="/settings/driver" />
diff --git a/modern/src/settings/GroupsPage.js b/modern/src/settings/GroupsPage.js
index 16a907c2..50f441eb 100644
--- a/modern/src/settings/GroupsPage.js
+++ b/modern/src/settings/GroupsPage.js
@@ -9,6 +9,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: {
@@ -23,13 +24,19 @@ const GroupsPage = () => {
 
   const [timestamp, setTimestamp] = useState(Date.now());
   const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
 
   useEffectAsync(async () => {
-    const response = await fetch('/api/groups');
-    if (response.ok) {
-      setItems(await response.json());
-    } else {
-      throw Error(await response.text());
+    setLoading(true);
+    try {
+      const response = await fetch('/api/groups');
+      if (response.ok) {
+        setItems(await response.json());
+      } else {
+        throw Error(await response.text());
+      }
+    } finally {
+      setLoading(false);
     }
   }, [timestamp]);
 
@@ -43,14 +50,14 @@ const GroupsPage = () => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {items.map((item) => (
+          {!loading ? items.map((item) => (
             <TableRow key={item.id}>
               <TableCell>{item.name}</TableCell>
               <TableCell className={classes.columnAction} padding="none">
                 <CollectionActions itemId={item.id} editPath="/settings/group" endpoint="groups" setTimestamp={setTimestamp} />
               </TableCell>
             </TableRow>
-          ))}
+          )) : (<TableShimmer columns={2} />)}
         </TableBody>
       </Table>
       <CollectionFab editPath="/settings/group" />
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" />
diff --git a/modern/src/settings/NotificationsPage.js b/modern/src/settings/NotificationsPage.js
index bdc9857f..6e268507 100644
--- a/modern/src/settings/NotificationsPage.js
+++ b/modern/src/settings/NotificationsPage.js
@@ -11,6 +11,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: {
@@ -25,13 +26,19 @@ const NotificationsPage = () => {
 
   const [timestamp, setTimestamp] = useState(Date.now());
   const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
 
   useEffectAsync(async () => {
-    const response = await fetch('/api/notifications');
-    if (response.ok) {
-      setItems(await response.json());
-    } else {
-      throw Error(await response.text());
+    setLoading(true);
+    try {
+      const response = await fetch('/api/notifications');
+      if (response.ok) {
+        setItems(await response.json());
+      } else {
+        throw Error(await response.text());
+      }
+    } finally {
+      setLoading(false);
     }
   }, [timestamp]);
 
@@ -59,7 +66,7 @@ const NotificationsPage = () => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {items.map((item) => (
+          {!loading ? items.map((item) => (
             <TableRow key={item.id}>
               <TableCell>{t(prefixString('event', item.type))}</TableCell>
               <TableCell>{formatBoolean(item.always, t)}</TableCell>
@@ -69,7 +76,7 @@ const NotificationsPage = () => {
                 <CollectionActions itemId={item.id} editPath="/settings/notification" endpoint="notifications" setTimestamp={setTimestamp} />
               </TableCell>
             </TableRow>
-          ))}
+          )) : (<TableShimmer columns={5} />)}
         </TableBody>
       </Table>
       <CollectionFab editPath="/settings/notification" />
diff --git a/modern/src/settings/UsersPage.js b/modern/src/settings/UsersPage.js
index ad755936..cffee2f6 100644
--- a/modern/src/settings/UsersPage.js
+++ b/modern/src/settings/UsersPage.js
@@ -10,6 +10,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: {
@@ -24,13 +25,19 @@ const UsersPage = () => {
 
   const [timestamp, setTimestamp] = useState(Date.now());
   const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
 
   useEffectAsync(async () => {
-    const response = await fetch('/api/users');
-    if (response.ok) {
-      setItems(await response.json());
-    } else {
-      throw Error(await response.text());
+    setLoading(true);
+    try {
+      const response = await fetch('/api/users');
+      if (response.ok) {
+        setItems(await response.json());
+      } else {
+        throw Error(await response.text());
+      }
+    } finally {
+      setLoading(false);
     }
   }, [timestamp]);
 
@@ -47,7 +54,7 @@ const UsersPage = () => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {items.map((item) => (
+          {!loading ? items.map((item) => (
             <TableRow key={item.id}>
               <TableCell>{item.name}</TableCell>
               <TableCell>{item.email}</TableCell>
@@ -57,7 +64,7 @@ const UsersPage = () => {
                 <CollectionActions itemId={item.id} editPath="/settings/user" endpoint="users" setTimestamp={setTimestamp} />
               </TableCell>
             </TableRow>
-          ))}
+          )) : (<TableShimmer columns={5} />)}
         </TableBody>
       </Table>
       <CollectionFab editPath="/settings/user" />