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>
   )
 }