style(v2): better loading screen

v2/lib/theme/Loading/index.js

@@ -7,12 +7,20 @@
 
 import React from 'react';
 
+import styles from './styles.module.css';
+
 export default props => {
   if (props.error) {
+    console.log(props.error);
     return <div align="center">Error</div>;
   }
   if (props.pastDelay) {
-    return <div align="center">Loading...</div>;
+    return (
+      <div className={styles.loader}>
+        <p>Please wait a moment</p>
+        <div className={styles.loaderSpinning} />
+      </div>
+    );
   }
   return null;
 };

v2/lib/theme/Loading/styles.module.css

@@ -0,0 +1,22 @@
+.loader {
+  width: 100%;
+  height: 49px;
+  position: fixed;
+  text-align: center;
+  top: 35%;
+}
+
+.loaderSpinning {
+  width: 49px;
+  height: 49px;
+  margin: 0 auto;
+  border: 5px solid #cccccc;
+  border-radius: 50%;
+  border-top: 5px solid #1d4d8b;
+  animation: loader-spin infinite 1s linear;
+}
+
+@keyframes loader-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}