Merge pull request #340 from LiskHQ/328-unify-loading-bars

Use one universal loading bar - Closes #328

src/components/delegates/delegates.js

@@ -39,6 +39,7 @@ app.component('delegates', {
       this.votedList = [];
       this.unvoteList = [];
       this.loading = true;
+      this.$scope.$emit('showLoadingBar');
       this.usernameInput = '';
       this.usernameSeparator = '\n';
 
@@ -90,6 +91,7 @@ app.component('delegates', {
      */
     loadDelegates(offset, search, replace, limit = 100) {
       this.loading = true;
+      this.$scope.$emit('showLoadingBar');
       this.delegateApi.listDelegates({
         offset,
         limit: limit.toString(),
@@ -129,6 +131,7 @@ app.component('delegates', {
 
         this.delegatesTotalCount = data.totalCount;
         this.loading = false;
+        this.$scope.$emit('hideLoadingBar');
       }
     }
 

src/components/delegates/delegates.pug

@@ -70,5 +70,3 @@ div.offline-hide
               td(md-cell, ng-bind='delegate.productivity + "%"')
               td(md-cell, ng-bind='delegate.approval + "%"')
       md-button.more(ng-show='$ctrl.delegatesDisplayedCount < $ctrl.filteredDelegates.length', ng-click='$ctrl.showMore()') Show More
-      .loading
-        md-progress-linear(md-mode='indeterminate', ng-show='$ctrl.loading')

src/components/forging/forging.js

@@ -22,6 +22,7 @@ app.component('forging', {
       this.$scope = $scope;
       this.$timeout = $timeout;
       this.forgingApi = forgingApi;
+      this.account = Account;
 
       this.statistics = {};
       this.blocks = [];
@@ -43,8 +44,8 @@ app.component('forging', {
      * @method updateAllData
      */
     updateAllData() {
-      this.updateDelegate();
-      this.updateForgedBlocks(20);
+      this.delegate = this.account.get().delegate || {};
+      this.updateForgedBlocks(20, 0, true);
 
       this.updateForgingStats('today', moment().set({ hour: 0, minute: 0, second: 0 }));
       this.updateForgingStats('last24h', moment().subtract(1, 'days'));
@@ -53,19 +54,6 @@ app.component('forging', {
       this.updateForgingStats('total', moment('2016-04-24 17:00'));
     }
 
-    /**
-     * Needs summary
-     *
-     * @method updateDelegate
-     */
-    updateDelegate() {
-      this.forgingApi.getDelegate().then((data) => {
-        this.delegate = data.delegate;
-      }).catch(() => {
-        this.delegate = {};
-      });
-    }
-
     /**
      * Call forgingApi to fetch forged blocks considering the given limit and offset
      * If offset is not defined and the fetched and existing lists aren't identical,
@@ -74,9 +62,13 @@ app.component('forging', {
      * @method updateForgedBlocks
      * @param {Number} limit
      * @param {Number} offset
+     * @param {Bool} showLoadingBar
      */
-    updateForgedBlocks(limit, offset) {
+    updateForgedBlocks(limit, offset, showLoadingBar) {
       this.$timeout.cancel(this.timeout);
+      if (showLoadingBar) {
+        this.$scope.$emit('showLoadingBar');
+      }
 
       this.forgingApi.getForgedBlocks(limit, offset).then((data) => {
         if (this.blocks.length === 0) {
@@ -90,6 +82,7 @@ app.component('forging', {
         this.blocksLoaded = true;
         this.moreBlocksExist = this.blocks.length < data.count;
       }).finally(() => {
+        this.$scope.$emit('hideLoadingBar');
         /**
          * @todo Replace this with SyncService
          */
@@ -106,7 +99,7 @@ app.component('forging', {
     loadMoreBlocks() {
       if (this.blocksLoaded && this.blocks.length !== 0 && this.moreBlocksExist) {
         this.blocksLoaded = false;
-        this.updateForgedBlocks(20, this.blocks.length);
+        this.updateForgedBlocks(20, this.blocks.length, true);
       }
     }
 

src/components/forging/forging.pug

@@ -1,19 +1,17 @@
 md-card.offline-hide
   div
-    md-card.loading(ng-show='!$ctrl.delegate')
-      md-progress-linear(md-mode='indeterminate')
     md-content
       div(layout='row', ng-if='$ctrl.delegate && !$ctrl.delegate.username')
         md-card(flex-100, flex-gt-xs=100, layout-align='center center', layout-padding)
           span.title You need to become a delegate to start forging. If you already registered to become a delegate, your registration hasn't been processed, yet.
-      div(layout='column', layout-gt-xs='row', ng-if='$ctrl.delegate.username')
+      div(layout='column', layout-gt-xs='row')
         md-card(flex-gt-xs=100, layout-padding)
           md-card-title
             md-card-title-text
               span.md-title.delegate-name {{$ctrl.delegate.username}}
             span(md-position-mode='target-right target')
               span {{$ctrl.statistics.total  | lsk | number:2 }} LSK Earned
-      md-content(layout='column', layout-gt-xs='row', ng-if='$ctrl.delegate.username')
+      md-content(layout='column', layout-gt-xs='row')
         md-card(flex-50, flex-gt-xs=25, layout-padding)
           .info-panel.info-panel-grey
             span.title Today
@@ -30,7 +28,7 @@ md-card.offline-hide
           .info-panel.info-panel-grey
             span.title {{'Last 30 days'}}
             span.pull-right {{$ctrl.statistics.last30d  | lsk | number:2 }} LSK
-      div(layout='column', layout-gt-xs='row', ng-if='$ctrl.delegate.username')
+      div(layout='column', layout-gt-xs='row')
         md-card(flex-gt-xs=33, layout-align='center center', layout-padding)
           div Rank
           div.progress-label {{$ctrl.delegate.rate}}
@@ -43,7 +41,7 @@ md-card.offline-hide
           div Approval
           div.progress-label {{$ctrl.delegate.approval}}%
           round-progress(max='100', current='$ctrl.delegate.approval', color='#0288D1')
-      md-card.forged-blocks(layout='column', ng-if='$ctrl.delegate.username')
+      md-card.forged-blocks(layout='column')
         md-card-title
           md-card-title-text
             span.md-title Forged Blocks
@@ -79,5 +77,3 @@ md-card.offline-hide
                     td(md-cell data-title='tableBlocks.cols.reward', sortable="'reward'") {{block.reward | lsk}}
                     td.width-80(md-cell data-title="''")
         md-button.more(ng-show='$ctrl.moreBlocksExist', ng-disabled='!$ctrl.blocksLoaded', ng-click='$ctrl.loadMoreBlocks()') Load More
-        .loading
-          md-progress-linear(md-mode='indeterminate', ng-hide='$ctrl.blocksLoaded')

src/components/loadingBar/loadingBar.js

@@ -0,0 +1,25 @@
+import './loadingBar.less';
+
+app.component('loadingBar', {
+  template: require('./loadingBar.pug')(),
+  controller: class loadingBar {
+
+    constructor($scope, $rootScope) {
+      this.loaders = [];
+      $rootScope.$on('showLoadingBar', (event, name) => {
+        const index = this.loaders.indexOf(name);
+        if (index === -1) {
+          this.loaders.push(name);
+        }
+      });
+
+      $rootScope.$on('hideLoadingBar', (event, name) => {
+        const index = this.loaders.indexOf(name);
+        if (index > -1) {
+          this.loaders.splice(index, 1);
+        }
+      });
+    }
+  },
+});
+

src/components/loadingBar/loadingBar.less

@@ -0,0 +1,7 @@
+loading-bar {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+}
+

src/components/loadingBar/loadingBar.pug

@@ -0,0 +1 @@
+md-progress-linear(md-mode='indeterminate', ng-if='$ctrl.loaders.length')

src/components/login/login.js

@@ -73,9 +73,11 @@ app.component('login', {
      */
     passConfirmSubmit(_passphrase = this.input_passphrase) {
       this.$rootScope.loggingIn = true;
+      this.$scope.$emit('showLoadingBar');
       if (this.Passphrase.normalize.constructor === Function) {
         this.peers.setActive(this.network).then(() => {
           this.$rootScope.loggingIn = false;
+          this.$scope.$emit('hideLoadingBar');
           if (this.peers.online) {
             this.account.set({
               passphrase: this.Passphrase.normalize(_passphrase),

src/components/main/main.js

@@ -37,7 +37,6 @@ app.component('main', {
      *
      * @param {Number} [attempts=0] The number of attempts to find an active peer
      * @returns {string} The name of the current state
-     * @todo We're safe to remove prelogged and we can replace logged with accountApi
      */
     init(attempts = 0) {
       if (!this.account.get() || !this.account.get().passphrase) {
@@ -47,11 +46,11 @@ app.component('main', {
         return '';
       }
 
-      this.$rootScope.prelogged = true;
+      this.$scope.$emit('showLoadingBar');
 
       this.update(attempts)
         .then(() => {
-          this.$rootScope.prelogged = false;
+          this.$scope.$emit('hideLoadingBar');
           this.$rootScope.logged = true;
           if (this.$timeout) {
             clearTimeout(this.$timeout);
@@ -89,6 +88,7 @@ app.component('main', {
           this.account.set({
             isDelegate: true,
             username: data.delegate.username,
+            delegate: data.delegate,
           });
         }
       });

src/components/transactions/transactions.js

@@ -24,6 +24,7 @@ app.component('transactions', {
       this.accountApi = AccountApi;
 
       this.loaded = false;
+      this.$scope.$emit('showLoadingBar');
       this.transactions = [];
       this.pendingTransactions = [];
 
@@ -33,7 +34,7 @@ app.component('transactions', {
         this.transactions.unshift(transaction);
       });
 
-      this.init.call(this);
+      this.init.call(this, true);
       this.$scope.$on('accountChange', () => {
         this.init.call(this);
       });
@@ -77,6 +78,7 @@ app.component('transactions', {
      */
     update(showLoading, showMore) {
       if (showLoading) {
+        this.$scope.$emit('showLoadingBar');
         this.loaded = false;
       }
 
@@ -99,6 +101,7 @@ app.component('transactions', {
           this.moreTransactionsExist = 0;
         })
         .finally(() => {
+          this.$scope.$emit('hideLoadingBar');
           this.loaded = true;
         });
     }

src/components/transactions/transactions.pug

@@ -54,5 +54,3 @@ md-card.offline-hide
                 .fee
                   lsk(amount='transaction.fee')
       md-button.more-button(ng-show='$ctrl.moreTransactionsExist && $ctrl.loaded', ng-click='$ctrl.showMore()') Load More
-  .loading
-    md-progress-linear(md-mode='indeterminate', ng-show='!$ctrl.loaded')

src/index.less

@@ -59,13 +59,6 @@ body {
     }
   }
 
-  .absolutely-positioned-loading {
-    position: absolute;
-    margin: 24px 12px;
-    width: 100%;
-    z-index: 10;
-  }
-
   md-dialog {
     md-dialog-actions {
       border: 0;

src/index.pug

@@ -11,7 +11,6 @@ html
     div.body-wrapper
       md-content(id="main", flex='100', flex-gt-sm='80', flex-offset-gt-sm='10')
         header
-        div.absolutely-positioned-loading(layout='row', layout-align='space-around', ng-show='prelogged || loggingIn')
-          md-progress-circular.md-warn(md-mode='indeterminate', md-diameter='80')
         div(ng-class='{ online: $root.peers.online, offline: !$root.peers.online }')
           div(data-ui-view)
+    loading-bar

src/liskNano.js

@@ -5,6 +5,7 @@ import './components/delegates/delegates';
 import './components/delegates/vote';
 import './components/forging/forging';
 import './components/header/header';
+import './components/loadingBar/loadingBar';
 import './components/login/login';
 import './components/lsk/lsk';
 import './components/main/main';

src/run.js

@@ -20,7 +20,7 @@ app.run(($rootScope, $timeout, $state, $transitions, $mdDialog, Peers, Account,
     Peers.reset(true);
 
     $rootScope.logged = false;
-    $rootScope.prelogged = false;
+    $rootScope.$emit('hideLoadingBar');
     Account.reset();
 
     $state.go('login');

src/services/api/peers.js

@@ -102,6 +102,7 @@ app.factory('Peers', ($timeout, $cookies, $location, $q, $rootScope, dialog) =>
           this.online = true;
           if (this.wasOffline) {
             dialog.successToast('Connection re-established');
+            $rootScope.$emit('hideLoadingBar', 'connection');
           }
           this.wasOffline = false;
         })
@@ -116,6 +117,7 @@ app.factory('Peers', ($timeout, $cookies, $location, $q, $rootScope, dialog) =>
               message += ' Make sure that you are using the latest version of Lisk Nano.';
             }
             dialog.errorToast(message);
+            $rootScope.$emit('showLoadingBar', 'connection');
           }
           this.wasOffline = true;
         });

test/components/forging/forging.spec.js

@@ -57,6 +57,7 @@ describe('Forging component', () => {
       passphrase: delegate.passphrase,
       balance: lsk.from(100),
       network,
+      delegate,
     };
 
     account.set(testAcount);
@@ -69,12 +70,6 @@ describe('Forging component', () => {
     forgingApiMock = sinon.mock(controller.forgingApi);
 
     let deferred = $q.defer();
-    forgingApiMock.expects('getDelegate').returns(deferred.promise);
-    deferred.resolve({
-      success: true,
-      delegate,
-    });
-
     deferred = $q.defer();
     forgingApiMock.expects('getForgedBlocks').returns(deferred.promise);
     deferred.resolve({
@@ -177,34 +172,6 @@ describe('forging component controller', () => {
     forgingApiMock.restore();
   });
 
-
-  describe('updateDelegate()', () => {
-    it('sets this.delegate to delegate object if delegate exists', () => {
-      const deferred = $q.defer();
-      forgingApiMock.expects('getDelegate').returns(deferred.promise);
-      controller.updateDelegate();
-
-      expect(controller.delegate).to.equal(undefined);
-      deferred.resolve({
-        success: true,
-        delegate,
-      });
-      $scope.$apply();
-      expect(controller.delegate).to.deep.equal(delegate);
-    });
-
-    it('sets this.delegate = {} if delegate does not exist', () => {
-      const deferred = $q.defer();
-      forgingApiMock.expects('getDelegate').returns(deferred.promise);
-      controller.updateDelegate();
-
-      expect(controller.delegate).to.equal(undefined);
-      deferred.reject();
-      $scope.$apply();
-      expect(controller.delegate).to.deep.equal({});
-    });
-  });
-
   describe('updateForgedBlocks(limit, offset)', () => {
     let deferred;
 

test/run.spec.js

@@ -59,11 +59,6 @@ describe('Application run method', () => {
       expect($rootScope.logged).to.equal(false);
     });
 
-    it('sets $rootScope.prelogged = false', () => {
-      $rootScope.logout();
-      expect($rootScope.prelogged).to.equal(false);
-    });
-
     it('resets account service', () => {
       $rootScope.logout();
       expect(account.get()).to.deep.equal({});