diff --git a/src/components/delegates/delegates.js b/src/components/delegates/delegates.js index c7b19132a..36bdf24e0 100644 --- a/src/components/delegates/delegates.js +++ b/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'); } } diff --git a/src/components/delegates/delegates.pug b/src/components/delegates/delegates.pug index 3a0ded3cf..10d4f99b0 100644 --- a/src/components/delegates/delegates.pug +++ b/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') diff --git a/src/components/forging/forging.js b/src/components/forging/forging.js index 719007281..c0db761d7 100644 --- a/src/components/forging/forging.js +++ b/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); } } diff --git a/src/components/forging/forging.pug b/src/components/forging/forging.pug index 3ee1a8fe8..8f8884783 100644 --- a/src/components/forging/forging.pug +++ b/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') diff --git a/src/components/loadingBar/loadingBar.js b/src/components/loadingBar/loadingBar.js new file mode 100644 index 000000000..d477e2888 --- /dev/null +++ b/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); + } + }); + } + }, +}); + diff --git a/src/components/loadingBar/loadingBar.less b/src/components/loadingBar/loadingBar.less new file mode 100644 index 000000000..f3fd331de --- /dev/null +++ b/src/components/loadingBar/loadingBar.less @@ -0,0 +1,7 @@ +loading-bar { + position: fixed; + width: 100%; + top: 0; + left: 0; +} + diff --git a/src/components/loadingBar/loadingBar.pug b/src/components/loadingBar/loadingBar.pug new file mode 100644 index 000000000..a9fdd0aa5 --- /dev/null +++ b/src/components/loadingBar/loadingBar.pug @@ -0,0 +1 @@ +md-progress-linear(md-mode='indeterminate', ng-if='$ctrl.loaders.length') diff --git a/src/components/login/login.js b/src/components/login/login.js index 56697c8ec..d87b564a2 100644 --- a/src/components/login/login.js +++ b/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), diff --git a/src/components/main/main.js b/src/components/main/main.js index bd0b188f0..c4458cff6 100644 --- a/src/components/main/main.js +++ b/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, }); } }); diff --git a/src/components/transactions/transactions.js b/src/components/transactions/transactions.js index 1d5a5a9be..dfb820042 100644 --- a/src/components/transactions/transactions.js +++ b/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; }); } diff --git a/src/components/transactions/transactions.pug b/src/components/transactions/transactions.pug index 2190334f5..45c961fbd 100644 --- a/src/components/transactions/transactions.pug +++ b/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') diff --git a/src/index.less b/src/index.less index 5c3fdea7b..71be6d58f 100644 --- a/src/index.less +++ b/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; diff --git a/src/index.pug b/src/index.pug index a74c42ebd..7f1a2b4ec 100644 --- a/src/index.pug +++ b/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 diff --git a/src/liskNano.js b/src/liskNano.js index 3b5f82557..fe7d8037f 100644 --- a/src/liskNano.js +++ b/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'; diff --git a/src/run.js b/src/run.js index 4e7086b0d..93e43e2ed 100644 --- a/src/run.js +++ b/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'); diff --git a/src/services/api/peers.js b/src/services/api/peers.js index e42069845..20705896c 100644 --- a/src/services/api/peers.js +++ b/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; }); diff --git a/test/components/forging/forging.spec.js b/test/components/forging/forging.spec.js index 1154ee511..10a74c9fd 100644 --- a/test/components/forging/forging.spec.js +++ b/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; diff --git a/test/run.spec.js b/test/run.spec.js index 742a51206..9c4971319 100644 --- a/test/run.spec.js +++ b/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({});