Moved map loading overlay to be full screen width

src/components/map/Map.js

@@ -8,7 +8,6 @@ import MapDrawing from "./MapDrawing";
 import MapFog from "./MapFog";
 import MapGrid from "./MapGrid";
 import MapMeasure from "./MapMeasure";
-import MapLoadingOverlay from "./MapLoadingOverlay";
 import NetworkedMapPointer from "../../network/NetworkedMapPointer";
 import MapNotes from "./MapNotes";
 
@@ -448,7 +447,6 @@ function Map({
           {noteMenu}
           {tokenDragOverlay}
           {noteDragOverlay}
-          <MapLoadingOverlay />
         </>
       }
       selectedToolId={selectedToolId}

src/components/map/MapLoadingOverlay.js

@@ -38,10 +38,10 @@ function MapLoadingOverlay() {
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
-          left: "8px",
-          bottom: "8px",
+          top: 0,
+          left: 0,
+          right: 0,
           flexDirection: "column",
-          borderRadius: "28px",
           zIndex: 2,
         }}
         bg="overlay"
@@ -50,8 +50,8 @@ function MapLoadingOverlay() {
           ref={progressBarRef}
           max={1}
           value={0}
-          m={2}
-          sx={{ width: "32px" }}
+          m={0}
+          sx={{ width: "100%", borderRadius: 0 }}
         />
       </Box>
     )

src/routes/Game.js

@@ -5,6 +5,7 @@ import { useParams } from "react-router-dom";
 import Banner from "../components/Banner";
 import LoadingOverlay from "../components/LoadingOverlay";
 import Link from "../components/Link";
+import MapLoadingOverlay from "../components/map/MapLoadingOverlay";
 
 import AuthModal from "../modals/AuthModal";
 
@@ -142,6 +143,7 @@ function Game() {
       </Banner>
       <AuthModal isOpen={authenticationStatus === "unauthenticated"} />
       {authenticationStatus === "unknown" && !offline && <LoadingOverlay />}
+      <MapLoadingOverlay />
     </MapStageProvider>
   );
 }