diff options
Diffstat (limited to 'modern/src/settings/MaintenancesPage.js')
-rw-r--r-- | modern/src/settings/MaintenancesPage.js | 21 |
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" /> |