Added map loading provider to fix bugs with multiple asset loading

src/App.js

@@ -13,6 +13,7 @@ import { AuthProvider } from "./contexts/AuthContext";
 import { DatabaseProvider } from "./contexts/DatabaseContext";
 import { MapDataProvider } from "./contexts/MapDataContext";
 import { TokenDataProvider } from "./contexts/TokenDataContext";
+import { MapLoadingProvider } from "./contexts/MapLoadingContext";
 
 function App() {
   return (
@@ -31,11 +32,13 @@ function App() {
                 <FAQ />
               </Route>
               <Route path="/game/:id">
-                <MapDataProvider>
-                  <TokenDataProvider>
-                    <Game />
-                  </TokenDataProvider>
-                </MapDataProvider>
+                <MapLoadingProvider>
+                  <MapDataProvider>
+                    <TokenDataProvider>
+                      <Game />
+                    </TokenDataProvider>
+                  </MapDataProvider>
+                </MapLoadingProvider>
               </Route>
               <Route path="/">
                 <Home />

src/components/map/Map.js

@@ -8,6 +8,8 @@ import MapDrawing from "./MapDrawing";
 import MapFog from "./MapFog";
 
 import TokenDataContext from "../../contexts/TokenDataContext";
+import MapLoadingContext from "../../contexts/MapLoadingContext";
+
 import TokenMenu from "../token/TokenMenu";
 import TokenDragOverlay from "../token/TokenDragOverlay";
 import LoadingOverlay from "../LoadingOverlay";
@@ -30,9 +32,9 @@ function Map({
   allowMapDrawing,
   allowFogDrawing,
   disabledTokens,
-  loading,
 }) {
   const { tokensById } = useContext(TokenDataContext);
+  const { isLoading } = useContext(MapLoadingContext);
 
   const gridX = map && map.gridX;
   const gridY = map && map.gridY;
@@ -300,7 +302,7 @@ function Map({
           {mapControls}
           {tokenMenu}
           {tokenDragOverlay}
-          {loading && <LoadingOverlay />}
+          {isLoading && <LoadingOverlay />}
         </>
       }
       selectedToolId={selectedToolId}

src/contexts/MapLoadingContext.js

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+
+const MapLoadingContext = React.createContext();
+
+export function MapLoadingProvider({ children }) {
+  const [loadingAssetCount, setLoadingAssetCount] = useState(0);
+
+  function assetLoadStart() {
+    setLoadingAssetCount((prevLoadingAssets) => prevLoadingAssets + 1);
+  }
+
+  function assetLoadFinish() {
+    setLoadingAssetCount((prevLoadingAssets) => prevLoadingAssets - 1);
+  }
+
+  const isLoading = loadingAssetCount > 0;
+
+  const value = {
+    assetLoadStart,
+    assetLoadFinish,
+    isLoading,
+  };
+
+  return (
+    <MapLoadingContext.Provider value={value}>
+      {children}
+    </MapLoadingContext.Provider>
+  );
+}
+
+export default MapLoadingContext;

src/routes/Game.js

@@ -25,6 +25,7 @@ import AuthContext from "../contexts/AuthContext";
 import DatabaseContext from "../contexts/DatabaseContext";
 import TokenDataContext from "../contexts/TokenDataContext";
 import MapDataContext from "../contexts/MapDataContext";
+import MapLoadingContext from "../contexts/MapLoadingContext";
 import { MapStageProvider } from "../contexts/MapStageContext";
 
 function Game() {
@@ -32,6 +33,7 @@ function Game() {
   const { authenticationStatus, userId, nickname, setNickname } = useContext(
     AuthContext
   );
+  const { assetLoadStart, assetLoadFinish } = useContext(MapLoadingContext);
 
   const { peers, socket } = useSession(
     gameId,
@@ -52,7 +54,6 @@ function Game() {
 
   const [currentMap, setCurrentMap] = useState(null);
   const [currentMapState, setCurrentMapState] = useState(null);
-  const [mapLoading, setMapLoading] = useState(false);
 
   const canEditMapDrawing =
     currentMap !== null &&
@@ -321,7 +322,7 @@ function Game() {
         if (cachedMap && cachedMap.lastModified === newMap.lastModified) {
           setCurrentMap(cachedMap);
         } else {
-          setMapLoading(true);
+          assetLoadStart();
           peer.connection.send({ id: "mapRequest", data: newMap.id });
         }
       } else {
@@ -335,7 +336,7 @@ function Game() {
     }
     // A new map response with a file attached
     if (data.id === "mapResponse") {
-      setMapLoading(false);
+      assetLoadFinish();
       if (data.data && data.data.type === "file") {
         const newMap = { ...data.data, file: data.data.file };
         putMap(newMap).then(() => {
@@ -356,7 +357,7 @@ function Game() {
           !cachedToken ||
           cachedToken.lastModified !== newToken.lastModified
         ) {
-          setMapLoading(true);
+          assetLoadStart();
           peer.connection.send({
             id: "tokenRequest",
             data: newToken.id,
@@ -369,7 +370,7 @@ function Game() {
       peer.connection.send({ id: "tokenResponse", data: token });
     }
     if (data.id === "tokenResponse") {
-      setMapLoading(false);
+      assetLoadFinish();
       const newToken = data.data;
       if (newToken && newToken.type === "file") {
         putToken(newToken);
@@ -532,7 +533,6 @@ function Game() {
           <Map
             map={currentMap}
             mapState={currentMapState}
-            loading={mapLoading}
             onMapTokenStateChange={handleMapTokenStateChange}
             onMapTokenStateRemove={handleMapTokenStateRemove}
             onMapChange={handleMapChange}