Added a loading spinner

src/components/LoadingOverlay.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { Box } from "theme-ui";
+
+import Spinner from "./Spinner";
+
+function LoadingOverlay() {
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        top: 0,
+        left: 0,
+      }}
+      bg="muted"
+    >
+      <Spinner />
+    </Box>
+  );
+}
+
+export default LoadingOverlay;

src/components/Spinner.css

@@ -0,0 +1,13 @@
+.spinner {
+  width: 32px;
+  height: 32px;
+  position: relative;
+
+  animation: rotate 2s infinite linear;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/components/Spinner.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { Box } from "theme-ui";
+
+import "./Spinner.css";
+import spinnerImage from "../images/Loading.png";
+
+function Spinner() {
+  return (
+    <Box className="spinner">
+      <Box
+        sx={{
+          backgroundImage: `url(${spinnerImage})`,
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: 0,
+          backgroundSize: "contain",
+        }}
+      ></Box>
+    </Box>
+  );
+}
+
+export default Spinner;

src/routes/Game.js

@@ -16,6 +16,7 @@ import Party from "../components/Party";
 import Tokens from "../components/Tokens";
 import Map from "../components/Map";
 import Banner from "../components/Banner";
+import LoadingOverlay from "../components/LoadingOverlay";
 
 import AuthModal from "../modals/AuthModal";
 
@@ -249,6 +250,7 @@ function Game() {
         </Box>
       </Banner>
       <AuthModal isOpen={authenticationStatus === "unauthenticated"} />
+      {authenticationStatus === "unknown" && <LoadingOverlay />}
     </>
   );
 }