browser: include loading message before addrgen

handshake-org · Jul 12, 2018 · d8972ba · d8972ba
1 parent 4783a6f
commit d8972ba
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 38 deletions.
diff --git a/browser/css/main.css b/browser/css/main.css
@@ -244,3 +244,33 @@ select {
   height: 35px;
   width: 35px;
 }
+
+.lds-dual-ring {
+  display: inline-block;
+  width: 64px;
+  height: 64px;
+}
+.lds-dual-ring:after {
+  animation: lds-dual-ring 1.2s linear infinite;
+  border: 5px solid #693AFA;
+  border-color: #693AFA transparent #693AFA transparent;
+  border-radius: 50%;
+  content: " ";
+  display: block;
+  height: 46px;
+  margin: 30px 1px 1px 30px;
+  width: 46px;
+}
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loader {
+  color: #693AFA;
+  text-align: center;
+}
diff --git a/browser/index.html b/browser/index.html
@@ -36,6 +36,11 @@ <h1 class="generate">HNS Address Generator</h1>
 <a href="./index.html" id="participants" class="show button">Faucet participants</a>
 <a href="./index.html" id="sponsors" class="show button">Project sponsors</a>
 
+<div id="loader" class="hide" style="color: #693AFA; text-align: center">
+This is where the magic happens...
+<div class="lds-dual-ring"></div>
+</div>
+
 <div id="error-box" class="error hide"></div>
 
 </div>

diff --git a/browser/js/main.js b/browser/js/main.js
@@ -22,62 +22,81 @@
     }
 
     document.getElementById('participants').addEventListener('click', function(e) {
+      const address = tool.getAddress();
       const canvas = document.getElementById('canvas');
+      const loader = document.getElementById('loader');
       const hidden = document.getElementsByClassName('participants hide');
       const shown = document.getElementsByClassName('show button');
-      const address = tool.getAddress();
 
       e.preventDefault();
 
-      document.getElementById('phrase').innerHTML = tool.getPhrase();
-      document.getElementById('plaintext-participants').innerHTML = tool.getAddress();
-      document.getElementById('privkey').innerHTML = tool.getPrivkey();
-      document.getElementById('pubkey').innerHTML = tool.getPubkey();
-
-      while (hidden.length > 0) {
-        hidden[0].classList.remove('hide');
-      }
-
+      // Hide buttons
       for (let i = 0; i < shown.length; i++) {
         shown[i].classList.add('hide');
       }
+
+      // Display loader before displaying wallet details
+      loader.classList.remove('hide');
+
+      setTimeout(function() {
+        loader.classList.add('hide');
+
+        document.getElementById('phrase').innerHTML = tool.getPhrase();
+        document.getElementById('plaintext-participants').innerHTML = tool.getAddress();
+        document.getElementById('privkey').innerHTML = tool.getPrivkey();
+        document.getElementById('pubkey').innerHTML = tool.getPubkey();
+
+        while (hidden.length > 0) {
+          hidden[0].classList.remove('hide');
+        }
+      }, 1000)
     });
 
     document.getElementById('sponsors').addEventListener('click', function(e) {
       const address = tool.getAddress();
+      const shown = document.getElementsByClassName('show button');
 
       e.preventDefault();
 
-      FaucetTool.encryptData(address).then(function(ciphertext) {
-        const canvas = document.getElementById('canvas');
-        const hidden = document.getElementsByClassName('sponsors hide');
-        const shown = document.getElementsByClassName('show button');
-
-        QRCode.toCanvas(canvas, ciphertext, function(err, canvas) {
-          if (err) {
-            throw new Error(err);
-          }
-
-          document.getElementById('ciphertext').innerHTML = ciphertext;
-          document.getElementById('phrase').innerHTML = tool.getPhrase();
-          document.getElementById('plaintext-sponsors').innerHTML = tool.getAddress();
-          document.getElementById('privkey').innerHTML = tool.getPrivkey();
-          document.getElementById('pubkey').innerHTML = tool.getPubkey();
-
-          while (hidden.length > 0) {
-            hidden[0].classList.remove('hide');
-          }
+      for (let i = 0; i < shown.length; i++) {
+        shown[i].classList.add('hide');
+      }
 
-          for (let i = 0; i < shown.length; i++) {
-            shown[i].classList.add('hide');
-          }
+      // Display loader before displaying wallet details
+      loader.classList.remove('hide');
+
+      setTimeout(function() {
+        FaucetTool.encryptData(address).then(function(ciphertext) {
+          const canvas = document.getElementById('canvas');
+          const loader = document.getElementById('loader');
+          const hidden = document.getElementsByClassName('sponsors hide');
+
+          QRCode.toCanvas(canvas, ciphertext, function(err, canvas) {
+            if (err) {
+              throw new Error(err);
+            }
+
+            document.getElementById('ciphertext').innerHTML = ciphertext;
+            document.getElementById('phrase').innerHTML = tool.getPhrase();
+            document.getElementById('plaintext-sponsors').innerHTML = tool.getAddress();
+            document.getElementById('privkey').innerHTML = tool.getPrivkey();
+            document.getElementById('pubkey').innerHTML = tool.getPubkey();
+
+            loader.classList.add('hide');
+
+            while (hidden.length > 0) {
+              hidden[0].classList.remove('hide');
+            }
+          });
+        })
+        .catch(function(err) {
+          const errorBox = document.getElementById('error-box');
+
+          loader.classList.add('hide');
+          errorBox.classList.remove('hide');
+          errorBox.innerHTML = err;
         });
-      })
-      .catch(function(err) {
-        const errorBox = document.getElementById('error-box');
-        errorBox.classList.remove('hide');
-        errorBox.innerHTML = err;
-      });
+      }, 1000);
     });
   });
 }());