aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-06-20 07:41:25 -0700
committerAnton Tananaev <anton@traccar.org>2022-06-20 07:41:25 -0700
commitb43c68e16e8af8db474b879421369e66a6f5da5f (patch)
tree7edd9027029435068ea1c2c7881fe13351e2fd94
parent8d56a292a5df90c00699f01e9188d7185a9b18af (diff)
downloadtrackermap-web-b43c68e16e8af8db474b879421369e66a6f5da5f.tar.gz
trackermap-web-b43c68e16e8af8db474b879421369e66a6f5da5f.tar.bz2
trackermap-web-b43c68e16e8af8db474b879421369e66a6f5da5f.zip
Loading shimmer for items
-rw-r--r--modern/src/settings/components/EditItemView.js28
1 files changed, 23 insertions, 5 deletions
diff --git a/modern/src/settings/components/EditItemView.js b/modern/src/settings/components/EditItemView.js
index 8dca1e66..4d354a8f 100644
--- a/modern/src/settings/components/EditItemView.js
+++ b/modern/src/settings/components/EditItemView.js
@@ -1,9 +1,7 @@
import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import makeStyles from '@mui/styles/makeStyles';
-import Container from '@mui/material/Container';
-import Button from '@mui/material/Button';
-
+import { Container, Button, Accordion, AccordionDetails, AccordionSummary, Skeleton, Typography, TextField } from '@mui/material';
import { useCatch, useEffectAsync } from '../../reactHelper';
import { useTranslation } from '../../common/components/LocalizationProvider';
import PageLayout from '../../common/components/PageLayout';
@@ -21,6 +19,10 @@ const useStyles = makeStyles((theme) => ({
flexBasis: '33%',
},
},
+ details: {
+ display: 'flex',
+ flexDirection: 'column',
+ },
}));
const EditItemView = ({
@@ -70,13 +72,29 @@ const EditItemView = ({
return (
<PageLayout menu={menu} breadcrumbs={breadcrumbs}>
<Container maxWidth="xs" className={classes.container}>
- {children}
+ {item ? children : (
+ <Accordion defaultExpanded>
+ <AccordionSummary>
+ <Typography variant="subtitle1">
+ <Skeleton width="10em" />
+ </Typography>
+ </AccordionSummary>
+ <AccordionDetails>
+ {[...Array(3)].map(() => (
+ <Skeleton width="100%">
+ <TextField />
+ </Skeleton>
+ ))}
+ </AccordionDetails>
+ </Accordion>
+ )}
<div className={classes.buttons}>
<Button
type="button"
color="primary"
variant="outlined"
onClick={() => navigate(-1)}
+ disabled={!item}
>
{t('sharedCancel')}
</Button>
@@ -85,7 +103,7 @@ const EditItemView = ({
color="primary"
variant="contained"
onClick={handleSave}
- disabled={!validate()}
+ disabled={!item || !validate()}
>
{t('sharedSave')}
</Button>