Add loading state and animation

packages/reporter/src/runnables/runnables.scss

@@ -263,4 +263,65 @@
       margin-right: 5px;
     }
   }
+
+  .runnable-loading {
+    .runnable-loading-animation {
+      display: flex;
+      margin: 3.5rem auto 1.5rem;
+      padding: 0 5px;
+      width: 160px;
+
+      div {
+        animation: scaling 1.65s linear infinite;
+        border-radius: 50%;
+        height: 40px;
+        margin: 0 -5px;
+        transform: scale(0.5);
+        width: 40px;
+      }
+
+      div:nth-child(1){
+        animation-delay:0.1s;
+        background: #56b790;
+      }
+
+      div:nth-child(2){
+        animation-delay:0.2s;
+        background: #4a88cc;
+      }
+
+      div:nth-child(3){
+        animation-delay:0.3s;
+        background: #b96162;
+      }
+
+      div:nth-child(4){
+        animation-delay:0.4s;
+        background: #e3b065;
+      }
+
+      div:nth-child(5){
+        animation-delay:0.5s;
+        background: #a9abad;
+      }
+
+      @keyframes scaling{
+        0%, 20%, 80%, 100%{
+          opacity: 100%;
+          transform: scale(0.5);
+        }
+
+        50%{
+          opacity: 50%;
+          transform: scale(1);
+        }
+      }
+    }
+
+    .runnable-loading-title {
+      font-family: $muli;
+      font-size: 20px;
+      text-align: center;
+    }
+  }
 }

packages/reporter/src/runnables/runnables.tsx

@@ -17,6 +17,19 @@ const noTestsError = (specPath: string) => ({
   message: 'We could not detect any tests in the above file. Write some tests and re-run.',
 })
 
+const Loading = () => (
+  <div className="runnable-loading">
+    <div className="runnable-loading-animation">
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+    </div>
+    <div className="runnable-loading-title">Your tests are loading...</div>
+  </div>
+)
+
 interface RunnablesListProps {
   runnables: RunnableArray
 }
@@ -30,7 +43,9 @@ const RunnablesList = observer(({ runnables }: RunnablesListProps) => (
 ))
 
 function content ({ isReady, runnables }: RunnablesStore, specPath: string, error?: Error) {
-  if (!isReady) return null
+  if (!isReady) {
+    return <Loading />
+  }
 
   // show error if there are no tests, but only if there
   // there isn't an error passed down that supercedes it