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

app/components/Onboarding/Syncing.js

@@ -37,23 +37,29 @@ class Syncing extends Component {
             <p>Might as well fund your wallet while you&apos;re waiting to sync.</p>
           </div>
 
-          <div className={styles.address}>
+          {address.length ? (
-            <div className={styles.qrConatiner}>
+            <div className={styles.address}>
-              <QRCode
+              <div className={styles.qrConatiner}>
-                value={address}
+                <QRCode
-                renderAs="svg"
+                  value={address}
-                size={100}
+                  renderAs="svg"
-                bgColor="transparent"
+                  size={100}
-                fgColor="white"
+                  bgColor="transparent"
-                level="L"
+                  fgColor="white"
-                className={styles.qrcode}
+                  level="L"
-              />
+                  className={styles.qrcode}
+                />
+              </div>
+              <section className={styles.textAddress}>
+                <span>{address}</span>
+                <span onClick={copyClicked}>copy</span>
+              </section>
             </div>
-            <section className={styles.textAddress}>
+          ) : (
-              <span>{address}</span>
+            <div className={styles.loading}>
-              <span onClick={copyClicked}>copy</span>
+              <div className={styles.spinner} />
-            </section>
+            </div>
-          </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);
+  }
+}