create Loading component with pinwheel ko animation

packages/server/packages/play-node-go/play-node-go/src/components/Display/Loading/Loading.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import './Loading.scss';
+
+const Loading = () => {
+  return (  
+    <div
+      className="Loading"
+    >
+      <div
+        className="point"
+        id="a-1"
+        ></div>
+      <div
+        className="point"
+        id="a-2"
+        ></div>
+      <div
+        className="point"
+        id="a-3"
+        ></div>
+      <div
+        className="point"
+        id="a-4"
+        ></div>
+      
+      <div
+        className="point"
+        id="b-1"
+        ></div>
+      <div
+        className="point"
+        id="b-2"
+        ></div>
+      <div
+        className="point"
+        id="b-3"
+        ></div>
+      <div
+        className="point"
+        id="b-4"
+        ></div>
+      
+      <div
+        className="point"
+        id="c-1"
+        ></div>
+      <div
+        className="point"
+        id="c-2"
+        ></div>
+      <div
+        className="point"
+        id="c-3"
+        ></div>
+      <div
+        className="point"
+        id="c-4"
+        ></div>
+      
+      <div
+        className="point"
+        id="d-1"
+        ></div>
+      <div
+        className="point"
+        id="d-2"
+        ></div>
+      <div
+        className="point"
+        id="d-3"
+        ></div>
+      <div
+        className="point"
+        id="d-4"
+      ></div>
+    </div>
+  );
+}
+
+export default Loading;

packages/server/packages/play-node-go/play-node-go/src/components/Display/Loading/Loading.scss

@@ -0,0 +1,183 @@
+div.Loading {
+  background-color: rgb(234, 178, 78);
+  display: flex;
+  flex-flow: row wrap;
+  height: 6vw;
+  width: 6vw;
+
+  div.point {
+    height: 1vw;
+    width: 1vw;
+    border-radius: 50%;
+    padding: 0.25vw;
+  }
+
+  #a-1 {
+    animation-name: white-stone--corner;
+    animation-duration: 4s;
+    animation-delay: -2.75s;
+    animation-iteration-count: infinite;
+  }
+  #a-2 {
+    background-color: black;
+    animation-name: black-stone;
+    animation-duration: 4s;
+    animation-delay: -1s;
+    animation-iteration-count: infinite;
+  }
+  #a-3 {
+    background-color: white;
+    animation-name: white-stone;
+    animation-duration: 4s;
+    animation-delay: -2.25s;
+    animation-iteration-count: infinite;
+  }
+  #a-4 {
+    animation-name: black-stone--corner;
+    animation-duration: 4s;
+    animation-delay: 0s;
+    animation-iteration-count: infinite;
+  }
+  
+  #b-1 {
+    background-color: black;
+    animation-name: black-stone;
+    animation-duration: 4s;
+    animation-delay: -1.5s;
+    animation-iteration-count: infinite;
+  }
+  #b-2 {
+    animation-name: white-stone--center;
+    animation-duration: 4s;
+    animation-delay: -3.25s;
+    animation-iteration-count: infinite;
+  }
+  #b-3 {
+    background-color: black;
+    animation-name: black-stone--center;
+    animation-duration: 4s;
+    animation-delay: -.5s;
+    animation-iteration-count: infinite;
+  }
+  #b-4 {
+    background-color: white;
+    animation-name: white-stone;
+    animation-duration: 4s;
+    animation-delay: -1.75s;
+    animation-iteration-count: infinite;
+  }
+
+  #c-1 {
+    animation-name: white-stone;
+    animation-duration: 4s;
+    animation-delay: -3.75s;
+    animation-iteration-count: infinite;
+  }
+  #c-2 {
+    background-color: black;
+    animation-name: black-stone--center;
+    animation-duration: 4s;
+    animation-delay: -2.5s;
+    animation-iteration-count: infinite;
+  }
+  #c-3 {
+    background-color: white;
+    animation-name: white-stone--center;
+    animation-duration: 4s;
+    animation-delay: -1.25s;
+    animation-iteration-count: infinite;
+  }
+  #c-4 {
+    animation-name: black-stone;
+    animation-duration: 4s;
+    animation-delay: -3.5s;
+    animation-iteration-count: infinite;
+  }
+  
+  #d-1 {
+    background-color: black;
+    animation-name: black-stone--corner;
+    animation-duration: 4s;
+    animation-delay: -2s;
+    animation-iteration-count: infinite;
+  }
+  #d-2 {
+    background-color: white;
+    animation-name: white-stone;
+    animation-duration: 4s;
+    animation-delay: -.25s;
+    animation-iteration-count: infinite;
+  }
+  #d-3 {
+    animation-name: black-stone;
+    animation-duration: 4s;
+    animation-delay: -3s;
+    animation-iteration-count: infinite;
+  }
+  #d-4 {
+    background-color: white;
+    animation-name: white-stone--corner;
+    animation-duration: 4s;
+    animation-delay: -.75s;
+    animation-iteration-count: infinite;
+  }
+
+}
+
+@keyframes black-stone {
+  0% {background: black;}
+  67.5% {background: black;}
+  70% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%), 
+    repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);}
+  99.5% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%), 
+    repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);}
+}
+
+@keyframes white-stone {
+  0% {background: white;}
+  60% {background: white;}
+  62.5% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%), 
+    repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);}
+  92.5% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%), 
+    repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);}
+  95% {background: white;}
+}
+
+@keyframes black-stone--corner {
+  0% {background: black;}
+  52.5% {background: black;};
+  55% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%), 
+    repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);};
+  99% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%), 
+    repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);};
+}
+
+@keyframes white-stone--corner {
+  0% {background: white;}
+  47.5% {background: white;};
+  50% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%), 
+    repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);};
+  95% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%), 
+    repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);};
+  97.5% {background: white;}
+}
+
+@keyframes black-stone--center {
+  0% {background: black;}
+  75.5% {background: black;};
+  77.5% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%), 
+    repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);};
+  99% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%), 
+    repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);};
+}
+
+@keyframes white-stone--center {
+  0% {background: white;}
+  72.5% {background: white;};
+  75% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%), 
+    repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);};
+  97.5% {background: repeating-linear-gradient(0deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%), 
+    repeating-linear-gradient(90deg, transparent 0%, transparent 45%, black 50%, transparent 55%, transparent 100%);};
+  100% {background: white;}
+}
+

packages/server/packages/play-node-go/play-node-go/src/pages/Home/Home.js

@@ -3,6 +3,7 @@ import './Home.scss';
 import roomsServices from '../../services/api/roomsServices';
 import RoomButton from '../../components/Button/Room/Room';
 
+import Loading from '../../components/Display/Loading/Loading';
 
 const Home = props => {
   const state =     props.state || {};
@@ -19,7 +20,7 @@ const Home = props => {
       ))
     }
     // TODO stub loader
-    return <p className="loading">Loading Component</p>
+    return <Loading />
   }
 
   const fetchRoomsAPI = async () => {

packages/server/packages/play-node-go/play-node-go/src/pages/Room/Room.js

@@ -9,6 +9,7 @@ import Message from '../../components/Display/Message/Message';
 import ActionError from '../../components/Error/ActionError/ActionError';
 
 import Development from '../../components/Display/Development/Development';
+import Loading from '../../components/Display/Loading/Loading';
 
 const Room = (props) => {
   const { state, dispatch} = props;
@@ -60,7 +61,7 @@ const Room = (props) => {
         />
       ))
     }
-    return <p>Loading Games...</p>
+    return <Loading />
   }
 
   const renderMessages = () => {
@@ -73,12 +74,13 @@ const Room = (props) => {
         />
       ))
     }
-    return <p>Loading Messages...</p>
+    return <Loading />
   }
 
 
   return (  
     <div className="Room" data-testid="Room">
+    
       <div className="Room__heading">
         <h2 className="heading--two">{state.currentRoom ? state.currentRoom.name : 'Loading'}</h2>
         {/* <span className="Room__connection">{socket ? '✓' : ' ⃠'}</span> */}