diff --git a/src/components/LoadingOverlay.js b/src/components/LoadingOverlay.js
new file mode 100644
index 0000000..eca0d0b
--- /dev/null
+++ b/src/components/LoadingOverlay.js
@@ -0,0 +1,26 @@
+import React from "react";
+import { Box } from "theme-ui";
+
+import Spinner from "./Spinner";
+
+function LoadingOverlay() {
+ return (
+
+
+
+ );
+}
+
+export default LoadingOverlay;
diff --git a/src/components/Spinner.css b/src/components/Spinner.css
new file mode 100644
index 0000000..d571a2f
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/src/components/Spinner.js b/src/components/Spinner.js
new file mode 100644
index 0000000..1dc1153
--- /dev/null
+++ b/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 (
+
+
+
+ );
+}
+
+export default Spinner;
diff --git a/src/images/Loading.png b/src/images/Loading.png
new file mode 100644
index 0000000..5c76e04
Binary files /dev/null and b/src/images/Loading.png differ
diff --git a/src/routes/Game.js b/src/routes/Game.js
index 7ac4d95..4823e47 100644
--- a/src/routes/Game.js
+++ b/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() {
+ {authenticationStatus === "unknown" && }
>
);
}