Merge pull request #352 from stratisproject/ui

Add loading indicator to login, create, recovery and sending process

Breeze.UI/src/app/login/login.component.html

@@ -40,9 +40,15 @@
           </form>
         </div>
         <!-- /row-->
-        <div class="row d-flex justify-content-center">
+        <div class="row d-flex justify-content-center" *ngIf="!isDecrypting">
           <button type="submit" class="btn btn-darkgray btn-lg" [disabled]="!openWalletForm.valid || isDecrypting" (click)="onDecryptClicked()">Decrypt</button>
         </div>
+        <div class="row d-flex justify-content-center" *ngIf="isDecrypting">
+          <div class="spinner">
+            <div class="double-bounce1"></div>
+            <div class="double-bounce2"></div>
+          </div>
+        </div>
       </div>
       <!-- /row-->
       <div class="row d-flex justify-content-center" *ngIf="hasWallet;else no_wallet">

Breeze.UI/src/app/setup/create/create.component.html

@@ -31,9 +31,15 @@
         </form>
       </div>
       <!-- /row-->
-      <div class="row d-flex justify-content-center">
+      <div class="row d-flex justify-content-center" *ngIf="!isCreating">
         <button type="button" class="btn btn-darkgray btn-lg" [disabled]="!createWalletForm.valid || isCreating" (click)="onCreateClicked()">Create</button>
       </div>
+      <div class="row d-flex justify-content-center" *ngIf="isCreating">
+        <div class="spinner">
+          <div class="double-bounce1"></div>
+          <div class="double-bounce2"></div>
+        </div>
+      </div>
       <!-- /row-->
     </div>
     <!-- /container-->

Breeze.UI/src/app/setup/recover/recover.component.html

@@ -35,9 +35,15 @@
         </form>
       </div>
       <!-- /row-->
-      <div class="row d-flex justify-content-center">
+      <div class="row d-flex justify-content-center" *ngIf="!isRecovering">
         <button type="button" class="btn btn-darkgray btn-lg" [disabled]="!recoverWalletForm.valid || isRecovering" (click)="onRecoverClicked()">Recover</button>
       </div>
+      <div class="row d-flex justify-content-center" *ngIf="isRecovering">
+        <div class="spinner">
+          <div class="double-bounce1"></div>
+          <div class="double-bounce2"></div>
+        </div>
+      </div>
       <!-- /row-->
     </div>
     <!-- /container-->

Breeze.UI/src/app/wallet/send/send.component.html

@@ -54,9 +54,15 @@
       <div class="row d-flex justify-content-center">
         <a><button type="button" class="btn btn-link col-12" (click)="activeModal.close('Close click')">Cancel</button></a>
       </div>
-      <div class="modal-footer">
+      <div class="modal-footer" *ngIf="!isSending">
         <button type="submit" class="btn btn-lg btn-primary" [disabled]="!sendForm.valid || isSending" (click)="send()">Send</button>
       </div>
+      <div class="modal-footer" *ngIf="isSending">
+        <div class="spinner">
+          <div class="double-bounce1"></div>
+          <div class="double-bounce2"></div>
+        </div>
+      </div>
     </div>
   </div>
 </div>

Breeze.UI/src/scss/_custom.scss

@@ -534,6 +534,49 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
   }
 }
 
+// Loading spinner
+.spinner {
+  width: 40px;
+  height: 40px;
+
+  position: relative;
+  margin: 0 auto;
+}
+
+.double-bounce1, .double-bounce2 {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #333;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  left: 0;
+  
+  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
+  animation: sk-bounce 2.0s infinite ease-in-out;
+}
+
+.double-bounce2 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+@-webkit-keyframes sk-bounce {
+  0%, 100% { -webkit-transform: scale(0.0) }
+  50% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bounce {
+  0%, 100% { 
+    transform: scale(0.0);
+    -webkit-transform: scale(0.0);
+  } 50% { 
+    transform: scale(1.0);
+    -webkit-transform: scale(1.0);
+  }
+}
+
 // Tumblebit
 #Tumblebit {
   padding-top: 4em;

Breeze.UI/src/styles.css

@@ -869,6 +869,51 @@ input.cmn-toggle-round-flat:checked + label:after {
   color: #1B354B;
 }
 
+.spinner {
+  width: 40px;
+  height: 40px;
+  position: relative;
+  margin: 0 auto;
+}
+
+.double-bounce1, .double-bounce2 {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #333;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
+  animation: sk-bounce 2.0s infinite ease-in-out;
+}
+
+.double-bounce2 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+@-webkit-keyframes sk-bounce {
+  0%, 100% {
+    -webkit-transform: scale(0);
+  }
+  50% {
+    -webkit-transform: scale(1);
+  }
+}
+
+@keyframes sk-bounce {
+  0%, 100% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+  }
+}
+
 #Tumblebit {
   padding-top: 4em;
 }