Added loading overlay to settings screen

src/modals/SettingsModal.js

@@ -12,6 +12,7 @@ import prettyBytes from "pretty-bytes";
 
 import Modal from "../components/Modal";
 import Slider from "../components/Slider";
+import LoadingOverlay from "../components/LoadingOverlay";
 
 import { useAuth } from "../contexts/AuthContext";
 import { useDatabase } from "../contexts/DatabaseContext";
@@ -33,6 +34,7 @@ function SettingsModal({ isOpen, onRequestClose }) {
   const [fogEditOpacity, setFogEditOpacity] = useSetting("fog.editOpacity");
   const [storageEstimate, setStorageEstimate] = useState();
   const [isImportExportModalOpen, setIsImportExportModalOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     async function estimateStorage() {
@@ -54,12 +56,14 @@ function SettingsModal({ isOpen, onRequestClose }) {
   }, [isOpen]);
 
   async function handleEraseAllData() {
+    setIsLoading(true);
     localStorage.clear();
     await database.delete();
     window.location.reload();
   }
 
   async function handleClearCache() {
+    setIsLoading(true);
     // Clear saved settings
     localStorage.clear();
     // Clear map cache
@@ -194,6 +198,7 @@ function SettingsModal({ isOpen, onRequestClose }) {
               </Text>
             </Flex>
           )}
+          {isLoading && <LoadingOverlay />}
         </Flex>
       </Modal>
       <ConfirmModal