aboutsummaryrefslogtreecommitdiff
path: root/modern/src/settings/GroupsPage.js
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-06-20 08:36:36 -0700
committerAnton Tananaev <anton@traccar.org>2022-06-20 08:36:36 -0700
commitd2de65460577a46dfa20f8df6870b10fa9c7d49e (patch)
tree03d72d3bafe4022a041811c9d1b40fe63626cb50 /modern/src/settings/GroupsPage.js
parentb43c68e16e8af8db474b879421369e66a6f5da5f (diff)
downloadtrackermap-web-d2de65460577a46dfa20f8df6870b10fa9c7d49e.tar.gz
trackermap-web-d2de65460577a46dfa20f8df6870b10fa9c7d49e.tar.bz2
trackermap-web-d2de65460577a46dfa20f8df6870b10fa9c7d49e.zip
Loading shimmer for settings
Diffstat (limited to 'modern/src/settings/GroupsPage.js')
-rw-r--r--modern/src/settings/GroupsPage.js21
1 files changed, 14 insertions, 7 deletions
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" />