From 86450a04db94f819e96b7c2f185bd2fb2cd5e3c1 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Thu, 30 Apr 2020 22:08:03 +1000
Subject: [PATCH] Added loading spinner to map load

---
 src/components/map/Map.js            |  2 ++
 src/components/map/MapInteraction.js | 12 +++++++++++-
 src/routes/Game.js                   |  4 ++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/map/Map.js b/src/components/map/Map.js
index 8459ab6..965afef 100644
--- a/src/components/map/Map.js
+++ b/src/components/map/Map.js
@@ -34,6 +34,7 @@ function Map({
   allowMapDrawing,
   allowFogDrawing,
   disabledTokens,
+  loading,
 }) {
   const mapSource = useDataSource(map, defaultMapSources);
 
@@ -296,6 +297,7 @@ function Map({
         aspectRatio={aspectRatio}
         isEnabled={selectedToolId === "pan"}
         controls={mapControls}
+        loading={loading}
       >
         {map && mapImage}
         {map && mapDrawing}
diff --git a/src/components/map/MapInteraction.js b/src/components/map/MapInteraction.js
index e440b17..06e0cd0 100644
--- a/src/components/map/MapInteraction.js
+++ b/src/components/map/MapInteraction.js
@@ -5,11 +5,20 @@ import normalizeWheel from "normalize-wheel";
 
 import { MapInteractionProvider } from "../../contexts/MapInteractionContext";
 
+import LoadingOverlay from "../LoadingOverlay";
+
 const zoomSpeed = -0.001;
 const minZoom = 0.1;
 const maxZoom = 5;
 
-function MapInteraction({ map, aspectRatio, isEnabled, children, controls }) {
+function MapInteraction({
+  map,
+  aspectRatio,
+  isEnabled,
+  children,
+  controls,
+  loading,
+}) {
   const mapContainerRef = useRef();
   const mapMoveContainerRef = useRef();
   const mapTranslateRef = useRef({ x: 0, y: 0 });
@@ -151,6 +160,7 @@ function MapInteraction({ map, aspectRatio, isEnabled, children, controls }) {
         </Box>
       </Box>
       {controls}
+      {loading && <LoadingOverlay />}
     </Box>
   );
 }
diff --git a/src/routes/Game.js b/src/routes/Game.js
index 5f70a1a..d83c7ca 100644
--- a/src/routes/Game.js
+++ b/src/routes/Game.js
@@ -43,6 +43,7 @@ function Game() {
 
   const [map, setMap] = useState(null);
   const [mapState, setMapState] = useState(null);
+  const [mapLoading, setMapLoading] = useState(false);
 
   const canEditMapDrawing =
     map !== null &&
@@ -272,6 +273,7 @@ function Game() {
             if (cachedMap && cachedMap.lastModified === newMap.lastModified) {
               setMap(cachedMap);
             } else {
+              setMapLoading(true);
               peer.connection.send({ id: "mapRequest" });
             }
           });
@@ -285,6 +287,7 @@ function Game() {
     }
     // A new map response with a file attached
     if (data.id === "mapResponse") {
+      setMapLoading(false);
       if (data.data && data.data.type === "file") {
         // Convert file back to blob after peer transfer
         const file = new Blob([data.data.file]);
@@ -471,6 +474,7 @@ function Game() {
             map={map}
             mapState={mapState}
             tokens={tokens}
+            loading={mapLoading}
             onMapTokenStateChange={handleMapTokenStateChange}
             onMapTokenStateRemove={handleMapTokenStateRemove}
             onMapChange={handleMapChange}