Moved map asset loading progress to use refs to stop re-renders

Moved map loading overlay to use animation frames for a smooth progress bar

src/components/map/Map.js

@@ -8,13 +8,12 @@ import MapFog from "./MapFog";
 import MapDice from "./MapDice";
 import MapGrid from "./MapGrid";
 import MapMeasure from "./MapMeasure";
+import MapLoadingOverlay from "./MapLoadingOverlay";
 
 import TokenDataContext from "../../contexts/TokenDataContext";
-import MapLoadingContext from "../../contexts/MapLoadingContext";
 
 import TokenMenu from "../token/TokenMenu";
 import TokenDragOverlay from "../token/TokenDragOverlay";
-import LoadingOverlay from "../LoadingOverlay";
 
 import { drawActionsToShapes } from "../../helpers/drawing";
 
@@ -36,7 +35,6 @@ function Map({
   disabledTokens,
 }) {
   const { tokensById } = useContext(TokenDataContext);
-  const { isLoading, loadingProgress } = useContext(MapLoadingContext);
 
   const gridX = map && map.gridX;
   const gridY = map && map.gridY;
@@ -299,7 +297,7 @@ function Map({
           {tokenMenu}
           {tokenDragOverlay}
           <MapDice />
-          {isLoading && <LoadingOverlay progress={loadingProgress} />}
+          <MapLoadingOverlay />
         </>
       }
       selectedToolId={selectedToolId}

src/components/map/MapLoadingOverlay.js

@@ -0,0 +1,61 @@
+import React, { useContext, useEffect, useRef } from "react";
+import { Box, Progress } from "theme-ui";
+
+import Spinner from "../Spinner";
+import MapLoadingContext from "../../contexts/MapLoadingContext";
+
+function MapLoadingOverlay() {
+  const { isLoading, loadingProgressRef } = useContext(MapLoadingContext);
+
+  const requestRef = useRef();
+  const progressBarRef = useRef();
+
+  // Use an animation frame to update the progress bar
+  // This bypasses react allowing the animation to be smooth
+  useEffect(() => {
+    function animate() {
+      if (!isLoading) {
+        return;
+      }
+      requestRef.current = requestAnimationFrame(animate);
+      progressBarRef.current.value = loadingProgressRef.current;
+    }
+
+    requestRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      cancelAnimationFrame(requestRef.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoading]);
+
+  return (
+    isLoading && (
+      <Box
+        sx={{
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          top: 0,
+          left: 0,
+          flexDirection: "column",
+        }}
+        bg="muted"
+      >
+        <Spinner />
+        <Progress
+          ref={progressBarRef}
+          max={1}
+          value={0}
+          m={2}
+          sx={{ width: "32px" }}
+        />
+      </Box>
+    )
+  );
+}
+
+export default MapLoadingOverlay;