loading in CardSource when flag set

src/components/presentational/CardSource.js

@@ -1,18 +1,24 @@
-import React from 'react';
+import React from 'react'
+import Spinner from './Spinner'
 
-import copy from '../../js/data/copy.json';
+import copy from '../../js/data/copy.json'
 
 const CardSource = ({ source, language, isLoading }) => {
-    const source_lang = copy[language].cardstack.source;
-    if (!source) source = copy[language].cardstack.unknown_source;
-    console.log(isLoading)
+  const source_lang = copy[language].cardstack.source
+  if (!source) source = copy[language].cardstack.unknown_source
 
-    return (
-        <div className="card-row card-cell source">
-            <h4>{source_lang}: </h4>
-            <p><small>{source}</small></p>
-        </div>
-    );
+  const content = isLoading ? (
+    <Spinner />
+  ) : (
+    <div><small>{source}</small></div>
+  )
+
+  return (
+    <div className="card-col card-cell source">
+      <h4>{source_lang}: </h4>
+      {content}
+    </div>
+  )
 }
 
-export default CardSource;
+export default CardSource

src/components/presentational/Spinner.js

@@ -1,10 +1,10 @@
 import React from 'react';
 
-const Spinner = ({}) => {
+const Spinner = () => {
   return (
     <div className="spinner">
-      <div className="double-bounce1"></div>
-      <div className="double-bounce2"></div>
+      <div className="double-bounce-overlay"></div>
+      <div className="double-bounce"></div>
     </div>
   )
 }

src/scss/card.scss

@@ -36,7 +36,7 @@
     margin-right: 5px;
   }
 
-  .card-row {
+  .card-row, .card-col {
     display: flex;
     flex-direction: row;
     border-bottom: 1px solid $lightwhite;
@@ -53,6 +53,10 @@
     }
   }
 
+  .card-col {
+    flex-direction: column;
+  }
+
   .card-cell {
     a {
       transition: color 0.2s;

src/scss/loading.scss

@@ -41,10 +41,10 @@ https://github.com/tobiasahlin/SpinKit/blob/master/LICENSE
   height: 40px;
 
   position: relative;
-  margin: 20px auto;
+  margin: 10px auto;
 }
 
-.double-bounce1, .double-bounce2 {
+.double-bounce, .double-bounce-overlay {
   width: 100%;
   height: 100%;
   border-radius: 50%;
@@ -58,20 +58,21 @@ https://github.com/tobiasahlin/SpinKit/blob/master/LICENSE
   animation: sk-bounce 3.0s infinite ease-in-out;
 }
 
-.double-bounce2 {
+.double-bounce-overlay {
   -webkit-animation-delay: -1.0s;
   animation-delay: -1.0s;
+  background-color: black;
 }
 
 @-webkit-keyframes sk-bounce {
-  0%, 100% { -webkit-transform: scale(0.0) }
+  0%, 100% { -webkit-transform: scale(0.3) }
   50% { -webkit-transform: scale(1.0) }
 }
 
 @keyframes sk-bounce {
   0%, 100% {
-    transform: scale(0.0);
-    -webkit-transform: scale(0.0);
+    transform: scale(0.3);
+    -webkit-transform: scale(0.3);
   } 50% {
     transform: scale(1.0);
     -webkit-transform: scale(1.0);