EditDialog: Add loading alert

zbycz · Oct 12, 2024 · a799e1a · a799e1a
1 parent c7157fc
commit a799e1a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/src/components/FeaturePanel/EditDialog/EditContent/EditDialogActions.tsx b/src/components/FeaturePanel/EditDialog/EditContent/EditDialogActions.tsx
@@ -7,12 +7,18 @@ import { useOsmAuthContext } from '../../../utils/OsmAuthContext';
 import { useGetHandleSave } from '../useGetHandleSave';
 
 const SaveButton = () => {
-  const { loggedIn } = useOsmAuthContext();
+  const { loggedIn, loading } = useOsmAuthContext();
   const { tags } = useEditContext();
   const handleSave = useGetHandleSave();
 
   return (
-    <Button onClick={handleSave} color="primary" variant="contained">
+    <Button
+      onClick={handleSave}
+      color="primary"
+      variant="contained"
+      startIcon={loading && <CircularProgress size={20} color={'secondary'} />}
+      disabled={loading}
+    >
       {loggedIn
         ? tags.cancelled
           ? t('editdialog.save_button_delete')

diff --git a/src/components/FeaturePanel/EditDialog/EditContent/OsmUserLoggedOut.tsx b/src/components/FeaturePanel/EditDialog/EditContent/OsmUserLoggedOut.tsx
@@ -1,13 +1,27 @@
 import React from 'react';
-import { Alert, Box, Button } from '@mui/material';
+import { Alert, Box, Button, CircularProgress, Stack } from '@mui/material';
 import { useOsmAuthContext } from '../../../utils/OsmAuthContext';
 import { t, Translation } from '../../../../services/intl';
 
 export const OsmUserLoggedOut = () => {
-  const { loggedIn, handleLogin } = useOsmAuthContext();
+  const { loggedIn, handleLogin, loading } = useOsmAuthContext();
 
   if (loggedIn) return null;
 
+  if (loading) {
+    return (
+      <Box sx={{ marginBottom: 2 }}>
+        <Alert
+          severity="info"
+          icon={null}
+          action={<CircularProgress size={30} color="inherit" />}
+        >
+          {t('editdialog.login_in_progress')}
+        </Alert>
+      </Box>
+    );
+  }
+
   return (
     <Box sx={{ marginBottom: 2 }}>
       <Alert

diff --git a/src/locales/vocabulary.js b/src/locales/vocabulary.js
@@ -188,6 +188,7 @@ export default {
   'editdialog.other_tags.new_key': 'new key',
   'editdialog.other_tags.will_be_deleted': 'will be deleted',
   'editdialog.other_tags.info': `Tags contain the data used to display objects on the map!<br>You can find <a href="https://wiki.openstreetmap.org/wiki/Map_Features">a reference for all tags on the OpenStreetMap Wiki</a>!`,
+  'editdialog.login_in_progress': `Logging in...`,
 
   'editsuccess.close_button': 'Done',
   'editsuccess.note.heading': 'Thank you for your suggestion!',