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" && } ); }