feat(sync): add loading spinner while address is trying to be generated

app/components/Onboarding/Syncing.js

@@ -37,6 +37,7 @@ class Syncing extends Component {
             <p>Might as well fund your wallet while you&apos;re waiting to sync.</p>
           </div>
 
+          {address.length ? (
             <div className={styles.address}>
               <div className={styles.qrConatiner}>
                 <QRCode
@@ -54,6 +55,11 @@ class Syncing extends Component {
                 <span onClick={copyClicked}>copy</span>
               </section>
             </div>
+          ) : (
+            <div className={styles.loading}>
+              <div className={styles.spinner} />
+            </div>
+          )}
 
           <section className={styles.progressContainer}>
             <h3>Syncing to the blockchain...</h3>

app/components/Onboarding/Syncing.scss

@@ -96,3 +96,42 @@
     margin-top: 10px;
   }
 }
+
+.spinner {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-left-color: rgba(0, 0, 0, 0.4);
+  -webkit-border-radius: 999px;
+  -moz-border-radius: 999px;
+  border-radius: 999px;
+  margin: 0 auto;
+  height: 75px;
+  width: 75px;
+  -webkit-animation: animation-rotate 1000ms linear infinite;
+  -moz-animation: animation-rotate 1000ms linear infinite;
+  -o-animation: animation-rotate 1000ms linear infinite;
+  animation: animation-rotate 1000ms linear infinite;
+}
+
+@-webkit-keyframes animation-rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes animation-rotate {
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@-o-keyframes animation-rotate {
+  100% {
+    -o-transform: rotate(360deg);
+  }
+}
+
+@keyframes animation-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}