Added more loading spinners to map and token operations

src/components/LoadingOverlay.js

@@ -3,7 +3,7 @@ import { Box } from "theme-ui";
 
 import Spinner from "./Spinner";
 
-function LoadingOverlay(bg) {
+function LoadingOverlay({ bg }) {
   return (
     <Box
       sx={{

src/modals/SelectMapModal.js

@@ -264,6 +264,7 @@ function SelectMapModal({
 
   const [isMapsRemoveModalOpen, setIsMapsRemoveModalOpen] = useState(false);
   async function handleMapsRemove() {
+    setIsLoading(true);
     setIsMapsRemoveModalOpen(false);
     await removeMaps(selectedMapIds);
     setSelectedMapIds([]);
@@ -271,10 +272,12 @@ function SelectMapModal({
     if (currentMap && selectedMapIds.includes(currentMap.id)) {
       onMapChange(null, null);
     }
+    setIsLoading(false);
   }
 
   const [isMapsResetModalOpen, setIsMapsResetModalOpen] = useState(false);
   async function handleMapsReset() {
+    setIsLoading(true);
     setIsMapsResetModalOpen(false);
     for (let id of selectedMapIds) {
       const newState = await resetMap(id);
@@ -283,6 +286,7 @@ function SelectMapModal({
         onMapStateChange(newState);
       }
     }
+    setIsLoading(false);
   }
 
   // Either single, multiple or range

src/modals/SelectTokensModal.js

@@ -22,9 +22,6 @@ import { useTokenData } from "../contexts/TokenDataContext";
 import { useAuth } from "../contexts/AuthContext";
 import { useKeyboard } from "../contexts/KeyboardContext";
 
-// 300 pixels total
-const thumbnailResolution = { size: 300, quality: 0.5 };
-
 function SelectTokensModal({ isOpen, onRequestClose }) {
   const { userId } = useAuth();
   const {
@@ -159,13 +156,17 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
 
   const [isTokensRemoveModalOpen, setIsTokensRemoveModalOpen] = useState(false);
   async function handleTokensRemove() {
+    setIsLoading(true);
     setIsTokensRemoveModalOpen(false);
     await removeTokens(selectedTokenIds);
     setSelectedTokenIds([]);
+    setIsLoading(false);
   }
 
   async function handleTokensHide(hideInSidebar) {
+    setIsLoading(true);
     await updateTokens(selectedTokenIds, { hideInSidebar });
+    setIsLoading(false);
   }
 
   // Either single, multiple or range