Merge pull request #410 from LiskHQ/407-transactions-pending-state

Add pending status spinner to transactions list - Closes #407

.gitignore

@@ -9,3 +9,5 @@ app/report.html
 app/*.map
 *.sw[pon]
 app/app.js
+.vscode
+.idea

src/components/delegates/delegates.less

@@ -84,46 +84,8 @@ delegates {
   }
 
   .spinner {
-    width: 40px;
-    text-align: center;
     margin-left: -10px;
   }
-
-  .spinner > div {
-    width: 8px;
-    height: 8px;
-    background-color: #aaa;
-
-    border-radius: 100%;
-    display: inline-block;
-    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-  }
-
-  .spinner .bounce1 {
-    -webkit-animation-delay: -0.32s;
-    animation-delay: -0.32s;
-  }
-
-  .spinner .bounce2 {
-    -webkit-animation-delay: -0.16s;
-    animation-delay: -0.16s;
-  }
-
-  @-webkit-keyframes sk-bouncedelay {
-    0%, 80%, 100% { -webkit-transform: scale(0.5) }
-    40% { -webkit-transform: scale(1.0) }
-  }
-
-  @keyframes sk-bouncedelay {
-    0%, 80%, 100% {
-      -webkit-transform: scale(0.5);
-      transform: scale(0.5);
-    } 40% {
-      -webkit-transform: scale(1.0);
-      transform: scale(1.0);
-    }
-  }
 }
 
 .lsk-vote-remove-button {

src/components/delegates/delegates.pug

@@ -46,10 +46,7 @@ div.offline-hide
               td(md-cell, colspan='6') No delegates found
             tr(md-row, ng-repeat="delegate in ($ctrl.filteredDelegates = ($ctrl.delegates | filter : {username: search} )) | limitTo : $ctrl.delegatesDisplayedCount", ng-class='{"downvote": delegate.status.voted && !delegate.status.selected, "upvote": !delegate.status.voted && delegate.status.selected, "pending": delegate.status.pending, "voted": delegate.status.voted && delegate.status.selected}')
               td(md-cell)
-                .spinner(ng-show='delegate.status.pending')
-                  .bounce1
-                  .bounce2
-                  .bounce3
+                spinner(ng-show='delegate.status.pending')
                 md-checkbox.md-primary(ng-show='!delegate.status.pending', ng-model='delegate.status.selected', ng-change='$ctrl.selectionChange(delegate)', aria-label='delegate selected for voting')
               td(md-cell, ng-bind='delegate.rank')
               td(md-cell, ng-bind='delegate.username')

src/components/spinner/spinner.js

@@ -0,0 +1,11 @@
+import './spinner.less';
+
+/**
+ * This component can be used to show pending state of a transaction
+ *
+ * @module app
+ * @submodule spinner
+ */
+app.component('spinner', {
+  template: require('./spinner.pug')(),
+});

src/components/spinner/spinner.less

@@ -0,0 +1,40 @@
+.spinner {
+  width: 40px;
+  text-align: center;
+  display: inline-block;
+  & > div {
+    width: 8px;
+    height: 8px;
+    background-color: #aaa;
+
+    border-radius: 100%;
+    display: inline-block;
+    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  }
+
+  .bounce1 {
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+  .bounce2 {
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+}
+
+// Spinner animations
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0.5) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  } 40% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}

src/components/spinner/spinner.pug

@@ -0,0 +1,4 @@
+.spinner
+  .bounce1
+  .bounce2
+  .bounce3

src/components/transactions/transactions.pug

@@ -18,7 +18,7 @@ md-card.offline-hide
             tr(md-row, ng-repeat="transaction in $ctrl.transactions track by transaction.id | orderBy:'-timestamp'")
               td(md-cell)
                 timestamp(data='transaction.timestamp', ng-show='transaction.confirmations')
-                span(ng-bind='transaction.confirmations ? "" : "PENDING"')
+                spinner(ng-show='!transaction.confirmations')
               td(md-cell)
                 span(ng-bind='transaction.id')
                   md-tooltip(md-direction='top', md-delay='350') {{ transaction.confirmations }} confirmations

src/liskNano.js

@@ -11,6 +11,7 @@ import './components/login/newAccount';
 import './components/lsk/lsk';
 import './components/main/main';
 import './components/main/secondPass';
+import './components/spinner/spinner';
 import './components/openDialog/openDialog';
 import './components/passphrase/passphrase';
 import './components/passphrase/passphraseService';