Add shimmer to reports

15 files changed, 135 insertions, 90 deletions

diff --git a/modern/src/common/components/TableShimmer.js b/modern/src/common/components/TableShimmer.js
index 3208551f..e7d12f95 100644
--- a/modern/src/common/components/TableShimmer.js
+++ b/modern/src/common/components/TableShimmer.js
@@ -1,13 +1,16 @@
 import React from 'react';
 import { Skeleton, TableCell, TableRow } from '@mui/material';
 
-const TableShimmer = ({ columns }) => [...Array(3)].map(() => (
+const TableShimmer = ({ columns, startAction, endAction }) => [...Array(3)].map(() => (
   <TableRow>
-    {[...Array(columns)].map(() => (
-      <TableCell>
-        <Skeleton />
-      </TableCell>
-    ))}
+    {[...Array(columns)].map((_, i) => {
+      const action = (startAction && i === 0) || (endAction && i === columns - 1);
+      return (
+        <TableCell padding={action ? 'none' : 'normal'}>
+          {!action && <Skeleton />}
+        </TableCell>
+      );
+    })}
   </TableRow>
 ));
 
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index 87ea1ee8..8416af71 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -13,6 +13,7 @@ import usePersistedState from '../common/util/usePersistedState';
 import ColumnSelect from './components/ColumnSelect';
 import { useCatch } from '../reactHelper';
 import useReportStyles from './common/useReportStyles';
+import TableShimmer from '../common/components/TableShimmer';
 
 const typesArray = [
   ['allEvents', 'eventAll'],
@@ -53,22 +54,28 @@ const EventReportPage = () => {
   const [columns, setColumns] = usePersistedState('eventColumns', ['eventTime', 'type', 'alarm']);
   const [eventTypes, setEventTypes] = useState(['allEvents']);
   const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
 
   const handleSubmit = useCatch(async ({ deviceId, from, to, mail, headers }) => {
-    const query = new URLSearchParams({ deviceId, from, to, mail });
-    eventTypes.forEach((it) => query.append('type', it));
-    const response = await fetch(`/api/reports/events?${query.toString()}`, { headers });
-    if (response.ok) {
-      const contentType = response.headers.get('content-type');
-      if (contentType) {
-        if (contentType === 'application/json') {
-          setItems(await response.json());
-        } else {
-          window.location.assign(window.URL.createObjectURL(await response.blob()));
+    setLoading(true);
+    try {
+      const query = new URLSearchParams({ deviceId, from, to, mail });
+      eventTypes.forEach((it) => query.append('type', it));
+      const response = await fetch(`/api/reports/events?${query.toString()}`, { headers });
+      if (response.ok) {
+        const contentType = response.headers.get('content-type');
+        if (contentType) {
+          if (contentType === 'application/json') {
+            setItems(await response.json());
+          } else {
+            window.location.assign(window.URL.createObjectURL(await response.blob()));
+          }
         }
+      } else {
+        throw Error(await response.text());
       }
-    } else {
-      throw Error(await response.text());
+    } finally {
+      setLoading(false);
     }
   });
 
@@ -129,7 +136,7 @@ const EventReportPage = () => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {items.map((item) => (
+          {!loading ? items.map((item) => (
             <TableRow key={item.id}>
               {columns.map((key) => (
                 <TableCell key={key}>
@@ -137,7 +144,7 @@ const EventReportPage = () => {
                 </TableCell>
               ))}
             </TableRow>
-          ))}
+          )) : (<TableShimmer columns={columns.length} />)}
         </TableBody>
       </Table>
     </PageLayout>
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index 5796e80c..1c24a15b 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -17,6 +17,7 @@ import MapView from '../map/core/MapView';
 import MapRoutePath from '../map/MapRoutePath';
 import MapPositions from '../map/MapPositions';
 import useReportStyles from './common/useReportStyles';
+import TableShimmer from '../common/components/TableShimmer';
 
 const RouteReportPage = () => {
   const classes = useReportStyles();
@@ -26,22 +27,28 @@ const RouteReportPage = () => {
 
   const [columns, setColumns] = usePersistedState('routeColumns', ['fixTime', 'latitude', 'longitude', 'speed', 'address']);
   const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
   const [selectedItem, setSelectedItem] = useState(null);
 
   const handleSubmit = useCatch(async ({ deviceId, from, to, mail, headers }) => {
-    const query = new URLSearchParams({ deviceId, from, to, mail });
-    const response = await fetch(`/api/reports/route?${query.toString()}`, { headers });
-    if (response.ok) {
-      const contentType = response.headers.get('content-type');
-      if (contentType) {
-        if (contentType === 'application/json') {
-          setItems(await response.json());
-        } else {
-          window.location.assign(window.URL.createObjectURL(await response.blob()));
+    setLoading(true);
+    try {
+      const query = new URLSearchParams({ deviceId, from, to, mail });
+      const response = await fetch(`/api/reports/route?${query.toString()}`, { headers });
+      if (response.ok) {
+        const contentType = response.headers.get('content-type');
+        if (contentType) {
+          if (contentType === 'application/json') {
+            setItems(await response.json());
+          } else {
+            window.location.assign(window.URL.createObjectURL(await response.blob()));
+          }
         }
+      } else {
+        throw Error(await response.text());
       }
-    } else {
-      throw Error(await response.text());
+    } finally {
+      setLoading(false);
     }
   });
 
@@ -74,7 +81,7 @@ const RouteReportPage = () => {
               </TableRow>
             </TableHead>
             <TableBody>
-              {items.map((item) => (
+              {!loading ? items.map((item) => (
                 <TableRow key={item.id}>
                   <TableCell className={classes.columnAction} padding="none">
                     {selectedItem === item ? (
@@ -97,7 +104,7 @@ const RouteReportPage = () => {
                     </TableCell>
                   ))}
                 </TableRow>
-              ))}
+              )) : (<TableShimmer columns={columns.length + 1} startAction />)}
             </TableBody>
           </Table>
         </div>
diff --git a/modern/src/reports/StatisticsPage.js b/modern/src/reports/StatisticsPage.js
index 2f839043..eb6130c7 100644
--- a/modern/src/reports/StatisticsPage.js
+++ b/modern/src/reports/StatisticsPage.js
@@ -11,6 +11,7 @@ import usePersistedState from '../common/util/usePersistedState';
 import ColumnSelect from './components/ColumnSelect';
 import { useCatch } from '../reactHelper';
 import useReportStyles from './common/useReportStyles';
+import TableShimmer from '../common/components/TableShimmer';
 
 const columnsArray = [
   ['captureTime', 'statisticsCaptureTime'],
@@ -32,14 +33,20 @@ const StatisticsPage = () => {
 
   const [columns, setColumns] = usePersistedState('statisticsColumns', ['captureTime', 'activeUsers', 'activeDevices', 'messagesStored']);
   const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
 
   const handleSubmit = useCatch(async ({ from, to }) => {
-    const query = new URLSearchParams({ from, to });
-    const response = await fetch(`/api/statistics?${query.toString()}`, { Accept: 'application/json' });
-    if (response.ok) {
-      setItems(await response.json());
-    } else {
-      throw Error(await response.text());
+    setLoading(true);
+    try {
+      const query = new URLSearchParams({ from, to });
+      const response = await fetch(`/api/statistics?${query.toString()}`, { Accept: 'application/json' });
+      if (response.ok) {
+        setItems(await response.json());
+      } else {
+        throw Error(await response.text());
+      }
+    } finally {
+      setLoading(false);
     }
   });
 
@@ -57,7 +64,7 @@ const StatisticsPage = () => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {items.map((item) => (
+          {!loading ? items.map((item) => (
             <TableRow key={item.id}>
               {columns.map((key) => (
                 <TableCell key={key}>
@@ -65,7 +72,7 @@ const StatisticsPage = () => {
                 </TableCell>
               ))}
             </TableRow>
-          ))}
+          )) : (<TableShimmer columns={columns.length} />)}
         </TableBody>
       </Table>
     </PageLayout>
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 9e42cb33..bacbe928 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -21,6 +21,7 @@ import MapPositions from '../map/MapPositions';
 import MapView from '../map/core/MapView';
 import MapCamera from '../map/MapCamera';
 import AddressValue from '../common/components/AddressValue';
+import TableShimmer from '../common/components/TableShimmer';
 
 const columnsArray = [
   ['startTime', 'reportStartTime'],
@@ -42,22 +43,28 @@ const StopReportPage = () => {
 
   const [columns, setColumns] = usePersistedState('stopColumns', ['startTime', 'endTime', 'startOdometer', 'address']);
   const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
   const [selectedItem, setSelectedItem] = useState(null);
 
   const handleSubmit = useCatch(async ({ deviceId, from, to, mail, headers }) => {
-    const query = new URLSearchParams({ deviceId, from, to, mail });
-    const response = await fetch(`/api/reports/stops?${query.toString()}`, { headers });
-    if (response.ok) {
-      const contentType = response.headers.get('content-type');
-      if (contentType) {
-        if (contentType === 'application/json') {
-          setItems(await response.json());
-        } else {
-          window.location.assign(window.URL.createObjectURL(await response.blob()));
+    setLoading(true);
+    try {
+      const query = new URLSearchParams({ deviceId, from, to, mail });
+      const response = await fetch(`/api/reports/stops?${query.toString()}`, { headers });
+      if (response.ok) {
+        const contentType = response.headers.get('content-type');
+        if (contentType) {
+          if (contentType === 'application/json') {
+            setItems(await response.json());
+          } else {
+            window.location.assign(window.URL.createObjectURL(await response.blob()));
+          }
         }
+      } else {
+        throw Error(await response.text());
       }
-    } else {
-      throw Error(await response.text());
+    } finally {
+      setLoading(false);
     }
   });
 
@@ -111,7 +118,7 @@ const StopReportPage = () => {
               </TableRow>
             </TableHead>
             <TableBody>
-              {items.map((item) => (
+              {!loading ? items.map((item) => (
                 <TableRow key={item.positionId}>
                   <TableCell className={classes.columnAction} padding="none">
                     {selectedItem === item ? (
@@ -130,7 +137,7 @@ const StopReportPage = () => {
                     </TableCell>
                   ))}
                 </TableRow>
-              ))}
+              )) : (<TableShimmer columns={columns.length + 1} startAction />)}
             </TableBody>
           </Table>
         </div>
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index 233bfe98..f6ec0691 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -15,6 +15,7 @@ import usePersistedState from '../common/util/usePersistedState';
 import ColumnSelect from './components/ColumnSelect';
 import { useCatch } from '../reactHelper';
 import useReportStyles from './common/useReportStyles';
+import TableShimmer from '../common/components/TableShimmer';
 
 const columnsArray = [
   ['deviceId', 'sharedDevice'],
@@ -42,23 +43,29 @@ const SummaryReportPage = () => {
   const [columns, setColumns] = usePersistedState('summaryColumns', ['deviceId', 'startTime', 'distance', 'averageSpeed']);
   const [daily, setDaily] = useState(false);
   const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
 
   const handleSubmit = useCatch(async ({ deviceIds, groupIds, from, to, mail, headers }) => {
-    const query = new URLSearchParams({ from, to, daily, mail });
-    deviceIds.forEach((deviceId) => query.append('deviceId', deviceId));
-    groupIds.forEach((groupId) => query.append('groupId', groupId));
-    const response = await fetch(`/api/reports/summary?${query.toString()}`, { headers });
-    if (response.ok) {
-      const contentType = response.headers.get('content-type');
-      if (contentType) {
-        if (contentType === 'application/json') {
-          setItems(await response.json());
-        } else {
-          window.location.assign(window.URL.createObjectURL(await response.blob()));
+    setLoading(true);
+    try {
+      const query = new URLSearchParams({ from, to, daily, mail });
+      deviceIds.forEach((deviceId) => query.append('deviceId', deviceId));
+      groupIds.forEach((groupId) => query.append('groupId', groupId));
+      const response = await fetch(`/api/reports/summary?${query.toString()}`, { headers });
+      if (response.ok) {
+        const contentType = response.headers.get('content-type');
+        if (contentType) {
+          if (contentType === 'application/json') {
+            setItems(await response.json());
+          } else {
+            window.location.assign(window.URL.createObjectURL(await response.blob()));
+          }
         }
+      } else {
+        throw Error(await response.text());
       }
-    } else {
-      throw Error(await response.text());
+    } finally {
+      setLoading(false);
     }
   });
 
@@ -107,7 +114,7 @@ const SummaryReportPage = () => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {items.map((item) => (
+          {!loading ? items.map((item) => (
             <TableRow key={(`${item.deviceId}_${Date.parse(item.startTime)}`)}>
               {columns.map((key) => (
                 <TableCell key={key}>
@@ -115,7 +122,7 @@ const SummaryReportPage = () => {
                 </TableCell>
               ))}
             </TableRow>
-          ))}
+          )) : (<TableShimmer columns={columns.length} />)}
         </TableBody>
       </Table>
     </PageLayout>
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index d2b4d9ef..5ad51f00 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -19,6 +19,7 @@ import useReportStyles from './common/useReportStyles';
 import MapView from '../map/core/MapView';
 import MapRoutePath from '../map/MapRoutePath';
 import AddressValue from '../common/components/AddressValue';
+import TableShimmer from '../common/components/TableShimmer';
 
 const columnsArray = [
   ['startTime', 'reportStartTime'],
@@ -46,6 +47,7 @@ const TripReportPage = () => {
 
   const [columns, setColumns] = usePersistedState('tripColumns', ['startTime', 'endTime', 'distance', 'averageSpeed']);
   const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
   const [selectedItem, setSelectedItem] = useState(null);
   const [route, setRoute] = useState(null);
 
@@ -72,19 +74,24 @@ const TripReportPage = () => {
   }, [selectedItem]);
 
   const handleSubmit = useCatch(async ({ deviceId, from, to, mail, headers }) => {
-    const query = new URLSearchParams({ deviceId, from, to, mail });
-    const response = await fetch(`/api/reports/trips?${query.toString()}`, { headers });
-    if (response.ok) {
-      const contentType = response.headers.get('content-type');
-      if (contentType) {
-        if (contentType === 'application/json') {
-          setItems(await response.json());
-        } else {
-          window.location.assign(window.URL.createObjectURL(await response.blob()));
+    setLoading(true);
+    try {
+      const query = new URLSearchParams({ deviceId, from, to, mail });
+      const response = await fetch(`/api/reports/trips?${query.toString()}`, { headers });
+      if (response.ok) {
+        const contentType = response.headers.get('content-type');
+        if (contentType) {
+          if (contentType === 'application/json') {
+            setItems(await response.json());
+          } else {
+            window.location.assign(window.URL.createObjectURL(await response.blob()));
+          }
         }
+      } else {
+        throw Error(await response.text());
       }
-    } else {
-      throw Error(await response.text());
+    } finally {
+      setLoading(false);
     }
   });
 
@@ -137,7 +144,7 @@ const TripReportPage = () => {
               </TableRow>
             </TableHead>
             <TableBody>
-              {items.map((item) => (
+              {!loading ? items.map((item) => (
                 <TableRow key={item.startPositionId}>
                   <TableCell className={classes.columnAction} padding="none">
                     {selectedItem === item ? (
@@ -156,7 +163,7 @@ const TripReportPage = () => {
                     </TableCell>
                   ))}
                 </TableRow>
-              ))}
+              )) : (<TableShimmer columns={columns.length + 1} startAction />)}
             </TableBody>
           </Table>
         </div>
diff --git a/modern/src/settings/CalendarsPage.js b/modern/src/settings/CalendarsPage.js
index e46fe8f1..2602f702 100644
--- a/modern/src/settings/CalendarsPage.js
+++ b/modern/src/settings/CalendarsPage.js
@@ -57,7 +57,7 @@ const CalendarsPage = () => {
                 <CollectionActions itemId={item.id} editPath="/settings/calendar" endpoint="calendars" setTimestamp={setTimestamp} />
               </TableCell>
             </TableRow>
-          )) : (<TableShimmer columns={2} />)}
+          )) : (<TableShimmer columns={2} endAction />)}
         </TableBody>
       </Table>
       <CollectionFab editPath="/settings/calendar" />
diff --git a/modern/src/settings/CommandsPage.js b/modern/src/settings/CommandsPage.js
index 3963952b..b6c88587 100644
--- a/modern/src/settings/CommandsPage.js
+++ b/modern/src/settings/CommandsPage.js
@@ -63,7 +63,7 @@ const CommandsPage = () => {
                 <CollectionActions itemId={item.id} editPath="/settings/command" endpoint="commands" setTimestamp={setTimestamp} />
               </TableCell>
             </TableRow>
-          )) : (<TableShimmer columns={4} />)}
+          )) : (<TableShimmer columns={4} endAction />)}
         </TableBody>
       </Table>
       <CollectionFab editPath="/settings/command" />
diff --git a/modern/src/settings/ComputedAttributesPage.js b/modern/src/settings/ComputedAttributesPage.js
index 952ea677..59b3adbd 100644
--- a/modern/src/settings/ComputedAttributesPage.js
+++ b/modern/src/settings/ComputedAttributesPage.js
@@ -67,7 +67,7 @@ const ComputedAttributesPage = () => {
                 </TableCell>
               )}
             </TableRow>
-          )) : (<TableShimmer columns={administrator ? 5 : 4} />)}
+          )) : (<TableShimmer columns={administrator ? 5 : 4} endAction={administrator} />)}
         </TableBody>
       </Table>
       <CollectionFab editPath="/settings/attribute" />
diff --git a/modern/src/settings/DriversPage.js b/modern/src/settings/DriversPage.js
index 7700f5cd..6ea97b31 100644
--- a/modern/src/settings/DriversPage.js
+++ b/modern/src/settings/DriversPage.js
@@ -59,7 +59,7 @@ const DriversPage = () => {
                 <CollectionActions itemId={item.id} editPath="/settings/driver" endpoint="drivers" setTimestamp={setTimestamp} />
               </TableCell>
             </TableRow>
-          )) : (<TableShimmer columns={3} />)}
+          )) : (<TableShimmer columns={3} endAction />)}
         </TableBody>
       </Table>
       <CollectionFab editPath="/settings/driver" />
diff --git a/modern/src/settings/GroupsPage.js b/modern/src/settings/GroupsPage.js
index 50f441eb..21785174 100644
--- a/modern/src/settings/GroupsPage.js
+++ b/modern/src/settings/GroupsPage.js
@@ -57,7 +57,7 @@ const GroupsPage = () => {
                 <CollectionActions itemId={item.id} editPath="/settings/group" endpoint="groups" setTimestamp={setTimestamp} />
               </TableCell>
             </TableRow>
-          )) : (<TableShimmer columns={2} />)}
+          )) : (<TableShimmer columns={2} endAction />)}
         </TableBody>
       </Table>
       <CollectionFab editPath="/settings/group" />
diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js
index da77be7e..c82629e4 100644
--- a/modern/src/settings/MaintenancesPage.js
+++ b/modern/src/settings/MaintenancesPage.js
@@ -86,7 +86,7 @@ const MaintenacesPage = () => {
                 <CollectionActions itemId={item.id} editPath="/settings/maintenance" endpoint="maintenance" setTimestamp={setTimestamp} />
               </TableCell>
             </TableRow>
-          )) : (<TableShimmer columns={5} />)}
+          )) : (<TableShimmer columns={5} endAction />)}
         </TableBody>
       </Table>
       <CollectionFab editPath="/settings/maintenance" />
diff --git a/modern/src/settings/NotificationsPage.js b/modern/src/settings/NotificationsPage.js
index 6e268507..3c9a9192 100644
--- a/modern/src/settings/NotificationsPage.js
+++ b/modern/src/settings/NotificationsPage.js
@@ -76,7 +76,7 @@ const NotificationsPage = () => {
                 <CollectionActions itemId={item.id} editPath="/settings/notification" endpoint="notifications" setTimestamp={setTimestamp} />
               </TableCell>
             </TableRow>
-          )) : (<TableShimmer columns={5} />)}
+          )) : (<TableShimmer columns={5} endAction />)}
         </TableBody>
       </Table>
       <CollectionFab editPath="/settings/notification" />
diff --git a/modern/src/settings/UsersPage.js b/modern/src/settings/UsersPage.js
index cffee2f6..a274d569 100644
--- a/modern/src/settings/UsersPage.js
+++ b/modern/src/settings/UsersPage.js
@@ -64,7 +64,7 @@ const UsersPage = () => {
                 <CollectionActions itemId={item.id} editPath="/settings/user" endpoint="users" setTimestamp={setTimestamp} />
               </TableCell>
             </TableRow>
-          )) : (<TableShimmer columns={5} />)}
+          )) : (<TableShimmer columns={5} endAction />)}
         </TableBody>
       </Table>
       <CollectionFab editPath="/settings/user" />