Replaced loading message with a spinner, also wrapping the pre-round page in the standard header and footer

client/src/components/Game/Game.jsx

@@ -37,11 +37,15 @@ const Game = () => {
         </HeaderAndFooter>
       );
     case PRE_ROUND:
-      return <PreRound
-        gameId={state.gameId}
-        playerName={state.playerName}
-        onStart={() => setGameState(IN_ROUND)}
-      />
+      return (
+        <HeaderAndFooter>
+          <PreRound
+            gameId={state.gameId}
+            playerName={state.playerName}
+            onStart={() => setGameState(IN_ROUND)}
+          />
+        </HeaderAndFooter>
+      );
     case IN_ROUND:
       return <GamePanel
         gameId={state.gameId}

client/src/components/util/Loading.jsx

@@ -1,10 +1,49 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
 
-const Container = styled.div`
-  text-align: center;
+const Wrapper = styled.div`
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
 `
+const frames = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`
+const SpinnerBox = styled.div`
+  display: inline-block;
+  position: relative;
+  width: 64px;
+  height: 64px;
+`
+const Spinner0 = styled.div`
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 51px;
+  height: 51px;
+  margin: 6px;
+  border: 6px solid #fff;
+  border-radius: 50%;
+  animation: ${frames} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #fff transparent transparent transparent;
+`
+const Spinner1 = styled(Spinner0)`animation-delay: -0.45s;`
+const Spinner2 = styled(Spinner0)`animation-delay: -0.3s;`
+const Spinner3 = styled(Spinner0)`animation-delay: -0.15s;`
 
-const Loading = () => <Container>Loading...</Container>
-
-export default Loading;
+export default () => (
+  <Wrapper>
+    <SpinnerBox>
+      <Spinner0/>
+      <Spinner1/>
+      <Spinner2/>
+      <Spinner3/>
+    </SpinnerBox>
+  </Wrapper>
+)