From 249d1d2492ea25bfc6e0d4a0677a30d33c1daab5 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Fri, 17 Jul 2020 16:19:59 +1000
Subject: [PATCH] Added loading spinner to map loading

---
 src/components/LoadingOverlay.js | 8 ++++++--
 src/modals/SelectMapModal.js     | 5 +++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/LoadingOverlay.js b/src/components/LoadingOverlay.js
index 8cc4b9e..2c31341 100644
--- a/src/components/LoadingOverlay.js
+++ b/src/components/LoadingOverlay.js
@@ -3,7 +3,7 @@ import { Box } from "theme-ui";
 
 import Spinner from "./Spinner";
 
-function LoadingOverlay() {
+function LoadingOverlay(bg) {
   return (
     <Box
       sx={{
@@ -17,11 +17,15 @@ function LoadingOverlay() {
         left: 0,
         flexDirection: "column",
       }}
-      bg="muted"
+      bg={bg}
     >
       <Spinner />
     </Box>
   );
 }
 
+LoadingOverlay.defaultProps = {
+  bg: "muted",
+};
+
 export default LoadingOverlay;
diff --git a/src/modals/SelectMapModal.js b/src/modals/SelectMapModal.js
index a2b0ff1..36f3624 100644
--- a/src/modals/SelectMapModal.js
+++ b/src/modals/SelectMapModal.js
@@ -6,6 +6,7 @@ import Modal from "../components/Modal";
 import MapTiles from "../components/map/MapTiles";
 import MapSettings from "../components/map/MapSettings";
 import ImageDrop from "../components/ImageDrop";
+import LoadingOverlay from "../components/LoadingOverlay";
 
 import blobToBuffer from "../helpers/blobToBuffer";
 
@@ -195,6 +196,9 @@ function SelectMapModal({
   }
 
   async function handleDone() {
+    if (imageLoading) {
+      return;
+    }
     if (selectedMapId) {
       await applyMapChanges();
       onMapChange(selectedMapWithChanges, selectedMapStateWithChanges);
@@ -287,6 +291,7 @@ function SelectMapModal({
           </Button>
         </Flex>
       </ImageDrop>
+      {imageLoading && <LoadingOverlay bg="overlay" />}
     </Modal>
   );
 }