Added loading spinner to map load

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}

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>
   );
 }

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}