App now runs loading spinner until it's done checking for params

client/src/App.js

@@ -9,6 +9,7 @@ import RoundSummary from './components/screens/RoundSummary';
 import ApiInfo from './components/util/ApiInfo';
 import { ERROR, IN_ROUND, POST_GAME, POST_ROUND, PRE_GAME, PRE_ROUND } from './domain/GameState';
 import { dispatch, useGameState } from './domain/gameStore';
+import Loading from './components/util/Loading';
 
 const needsHeaderFooter = {
   [PRE_GAME]: true,
@@ -84,6 +85,7 @@ const State = ({ show, children, setTransitioning }) => {
 }
 
 export default () => {
+  const [loading, setLoading] = useState(true);
   const [transitioning, setTransitioning] = useState(true);
   const gameState = useGameState();
   useEffect(() => {
@@ -97,6 +99,7 @@ export default () => {
         break;
       }
     }
+    setLoading(false);
   }, []);
   const needsHF = needsHeaderFooter[gameState];
 
@@ -104,7 +107,12 @@ export default () => {
     <React.StrictMode>
       <div className={styles.page}>
         <Header show={needsHF} />
-        <State show={gameState === PRE_GAME} setTransitioning={setTransitioning}>
+        <State show={loading} setTransitioning={setTransitioning}>
+          <div className={styles.loading}>
+            <Loading />
+          </div>
+        </State>
+        <State show={!loading && gameState === PRE_GAME} setTransitioning={setTransitioning}>
           <HomePage />
         </State>
         <State show={gameState === PRE_ROUND} setTransitioning={setTransitioning}>

client/src/App.module.css

@@ -24,4 +24,11 @@
 .state {
   height: 100%;
   width: 100%;
-}
+}
+
+.loading {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}