aboutsummaryrefslogtreecommitdiff
path: root/modern/src/settings/MaintenancesPage.js
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/settings/MaintenancesPage.js')
-rw-r--r--modern/src/settings/MaintenancesPage.js21
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" />