Merge pull request #439 from cosmos/fabo/380-loading-spinners

Fabo/380 loading spinners

app/src/renderer/components/govern/PageProposals.vue

@@ -9,7 +9,8 @@ page(title='Proposals')
       .label Search
   modal-search(type="proposals")
 
-  data-empty(v-if="proposals.length === 0")
+  data-loading(v-if="proposals.loading")
+  data-empty(v-else-if="proposals.length === 0")
   data-empty-search(v-else-if="filteredProposals.length === 0")
   li-proposal(
     v-else
@@ -22,6 +23,7 @@ page(title='Proposals')
 import { mapGetters } from 'vuex'
 import { includes, orderBy } from 'lodash'
 import Mousetrap from 'mousetrap'
+import DataLoading from 'common/NiDataLoading'
 import DataEmpty from 'common/NiDataEmpty'
 import DataEmptySearch from 'common/NiDataEmptySearch'
 import LiProposal from 'govern/LiProposal'
@@ -33,6 +35,7 @@ import Part from 'common/NiPart'
 export default {
   name: 'page-proposals',
   components: {
+    DataLoading,
     DataEmpty,
     DataEmptySearch,
     LiProposal,
@@ -45,9 +48,9 @@ export default {
   computed: {
     ...mapGetters(['proposals', 'filters']),
     filteredProposals () {
-      if (this.proposals && this.filters) {
+      if (this.proposals.items && this.filters) {
         let query = this.filters.proposals.search.query
-        let proposals = orderBy(this.proposals, [this.sort.property], [this.sort.order])
+        let proposals = orderBy(this.proposals.items, [this.sort.property], [this.sort.order])
         if (this.filters.proposals.search.visible) {
           return proposals.filter(p => includes(p.title.toLowerCase(), query))
         } else {

app/src/renderer/components/monitor/PageBlock.vue

@@ -41,14 +41,16 @@ page(:title="pageBlockTitle" v-if="block.header")
     :dd="p.signature.data")
 
   part(title='Transactions')
-    list-item(v-if="block.header.num_txs > 0" v-for="tx in block.data.txs" :key="tx.id" dt="Transaction" :dd="TODO")
-    data-empty(v-if="block.header.num_txs === 0" title="Empty Block" subtitle="There were no transactions in this block.")
+    data-loading(v-if="blockchain.blockLoading")
+    data-empty(v-else-if="block.header.num_txs === 0" title="Empty Block" subtitle="There were no transactions in this block.")
+    list-item(v-else v-for="tx in block.data.txs" :key="tx.id" dt="Transaction" :dd="TODO")
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import moment from 'moment'
 import num from 'scripts/num'
+import DataLoading from 'common/NiDataLoading'
 import DataEmpty from 'common/NiDataEmpty'
 import ToolBar from 'common/NiToolBar'
 import ListItem from 'common/NiListItem'
@@ -57,6 +59,7 @@ import Page from 'common/NiPage'
 export default {
   name: 'page-block',
   components: {
+    DataLoading,
     DataEmpty,
     ToolBar,
     ListItem,

app/src/renderer/components/monitor/PageValidators.vue

@@ -6,7 +6,8 @@ page(title='Validators')
       .label Search
   modal-search(type="validators")
 
-  data-empty(v-if="validators.length === 0")
+  data-loading(v-if="validators.loading")
+  data-empty(v-else-if="validators.length === 0")
   data-empty-search(v-else-if="filteredValidators.length === 0")
   list-item(
     v-else
@@ -23,6 +24,7 @@ import { mapGetters } from 'vuex'
 import { includes, orderBy } from 'lodash'
 import Mousetrap from 'mousetrap'
 import ListItem from 'common/NiListItem'
+import DataLoading from 'common/NiDataLoading'
 import DataEmpty from 'common/NiDataEmpty'
 import DataEmptySearch from 'common/NiDataEmptySearch'
 import ModalSearch from 'common/NiModalSearch'
@@ -32,6 +34,7 @@ import ToolBar from 'common/NiToolBar'
 export default {
   name: 'page-validators',
   components: {
+    DataLoading,
     DataEmpty,
     DataEmptySearch,
     ListItem,
@@ -60,6 +63,7 @@ export default {
   mounted () {
     Mousetrap.bind(['command+f', 'ctrl+f'], () => this.setSearch(true))
     Mousetrap.bind('esc', () => this.setSearch(false))
+    this.$store.dispatch('getValidators')
   }
 }
 </script>

app/src/renderer/components/staking/LiDelegate.vue

@@ -42,13 +42,13 @@ export default {
       return value
     },
     vpMax () {
-      if (this.delegates.length > 0) {
-        let richestDelegate = maxBy(this.delegates, 'voting_power')
+      if (this.delegates.delegates.length > 0) {
+        let richestDelegate = maxBy(this.delegates.delegates, 'voting_power')
         return richestDelegate.voting_power
       } else { return 0 }
     },
     vpTotal () {
-      return this.delegates
+      return this.delegates.delegates
         .slice()
         .sort((a, b) => b.voting_power - a.voting_power)
         .slice(0, 100)

app/src/renderer/components/staking/PageDelegate.vue

@@ -54,8 +54,8 @@ export default {
       let value = {
         description: {}
       }
-      if (this.delegates && this.$route.params.delegate) {
-        value = this.delegates.find(v => v.id === this.$route.params.delegate) || value
+      if (this.delegates.delegates && this.$route.params.delegate) {
+        value = this.delegates.delegates.find(v => v.id === this.$route.params.delegate) || value
       }
       return value
     },

app/src/renderer/components/staking/PageDelegates.vue

@@ -11,7 +11,8 @@ page#page-delegates(title='Delegates')
   modal-search(type="delegates")
 
   .delegates-container
-    data-loading(v-if="delegates.length === 0")
+    data-loading(v-if="delegates.loading")
+    data-empty(v-else-if="delegates.delegates.length === 0")
     data-empty-search(v-else-if="filteredDelegates.length === 0")
     template(v-else)
       panel-sort(:sort='sort')
@@ -32,6 +33,7 @@ import { includes, orderBy } from 'lodash'
 import Mousetrap from 'mousetrap'
 import LiDelegate from 'staking/LiDelegate'
 import Btn from '@nylira/vue-button'
+import DataEmpty from 'common/NiDataEmpty'
 import DataEmptySearch from 'common/NiDataEmptySearch'
 import DataLoading from 'common/NiDataLoading'
 import Field from '@nylira/vue-field'
@@ -45,6 +47,7 @@ export default {
   components: {
     LiDelegate,
     Btn,
+    DataEmpty,
     DataEmptySearch,
     DataLoading,
     Field,
@@ -59,7 +62,7 @@ export default {
     address () { return this.user.address },
     filteredDelegates () {
       let query = this.filters.delegates.search.query
-      let list = orderBy(this.delegates, [this.sort.property], [this.sort.order])
+      let list = orderBy(this.delegates.delegates, [this.sort.property], [this.sort.order])
       if (this.filters.delegates.search.visible) {
         return list.filter(i => includes(JSON.stringify(i).toLowerCase(), query.toLowerCase()))
       } else {

app/src/renderer/components/wallet/PageBalances.vue

@@ -14,7 +14,8 @@ page(title='Balances')
     li-copy(:value="wallet.key.address")
 
   part(title="Denomination Balances")
-    data-empty(v-if="wallet.balances.length === 0")
+    data-loading(v-if="wallet.balancesLoading")
+    data-empty(v-else-if="wallet.balances.length === 0")
     data-empty-search(v-else-if="filteredBalances.length === 0")
     list-item(
       v-for="i in filteredBalances"
@@ -37,6 +38,7 @@ page(title='Balances')
 import { mapGetters } from 'vuex'
 import { includes, orderBy } from 'lodash'
 import Mousetrap from 'mousetrap'
+import DataLoading from 'common/NiDataLoading'
 import DataEmpty from 'common/NiDataEmpty'
 import DataEmptySearch from 'common/NiDataEmptySearch'
 import LiCopy from 'common/NiLiCopy'
@@ -48,6 +50,7 @@ import ToolBar from 'common/NiToolBar'
 export default {
   name: 'page-balances',
   components: {
+    DataLoading,
     DataEmpty,
     DataEmptySearch,
     LiCopy,

app/src/renderer/components/wallet/PageTransactions.vue

@@ -7,7 +7,8 @@ page(title='Transactions')
 
   modal-search(type="transactions")
 
-  data-empty-tx(v-if='transactions.length === 0')
+  data-loading(v-if="wallet.historyLoading")
+  data-empty-tx(v-else-if='transactions.length === 0')
   data-empty-search(v-else-if="filteredTransactions.length === 0")
   li-transaction(
     v-else
@@ -23,6 +24,7 @@ import shortid from 'shortid'
 import { mapGetters } from 'vuex'
 import { includes, orderBy, uniqBy } from 'lodash'
 import Mousetrap from 'mousetrap'
+import DataLoading from 'common/NiDataLoading'
 import DataEmptySearch from 'common/NiDataEmptySearch'
 import DataEmptyTx from 'common/NiDataEmptyTx'
 import LiTransaction from 'wallet/LiTransaction'
@@ -34,6 +36,7 @@ export default {
   name: 'page-transactions',
   components: {
     LiTransaction,
+    DataLoading,
     DataEmptySearch,
     DataEmptyTx,
     ModalSearch,

app/src/renderer/vuex/modules/blockchain.js

@@ -9,6 +9,7 @@ export default ({ commit, node }) => {
     abciInfo: {},
     blocks: [],
     block: {},
+    blockLoading: false,
     url: ''
   }
 
@@ -35,9 +36,11 @@ export default ({ commit, node }) => {
 
   const actions = {
     async getBlock ({ state, commit }, height) {
+      state.blockLoading = true
       const blockUrl = url + '/block?height=' + height
       let block = (await axios.get(blockUrl)).data.result
       commit('setBlock', block)
+      state.blockLoading = false
     }
   }
 

app/src/renderer/vuex/modules/delegates.js

@@ -1,31 +1,37 @@
 import axios from 'axios'
 
 export default ({ dispatch, node }) => {
-  const state = []
+  const state = {
+    delegates: [],
+    loading: false
+  }
 
   const mutations = {
     addDelegate (state, delegate) {
       delegate.id = delegate.pub_key.data
       Object.assign(delegate, delegate.description)
 
       // update if we already have this delegate
-      for (let existingDelegate of state) {
+      for (let existingDelegate of state.delegates) {
         if (existingDelegate.id === delegate.id) {
           Object.assign(existingDelegate, delegate)
           return
         }
       }
 
-      state.push(delegate)
+      state.delegates.push(delegate)
     }
   }
 
   const actions = {
-    async getDelegates ({ dispatch }) {
+    async getDelegates ({ state, dispatch }) {
+      state.loading = true
       let delegatePubkeys = (await node.candidates()).data
-      return Promise.all(delegatePubkeys.map(pubkey => {
+      let delegates = await Promise.all(delegatePubkeys.map(pubkey => {
         return dispatch('getDelegate', pubkey)
       }))
+      state.loading = false
+      return delegates
     },
     async getDelegate ({ commit }, pubkey) {
       let delegate = (await axios.get(`http://localhost:${node.relayPort}/query/stake/candidate/${pubkey.data}`)).data.data

app/src/renderer/vuex/modules/proposals.js

@@ -1,7 +1,11 @@
 import data from '../json/proposals.json'
 
 export default ({ commit }) => {
-  const state = data
+  const state = {
+    items: data,
+    loading: false
+  }
+
   const mutations = {
   }
   return { state, mutations }

app/src/renderer/vuex/modules/validators.js

@@ -1,6 +1,7 @@
-export default ({ commit, node }) => {
+export default ({ node }) => {
   const state = {
     validators: {},
+    loading: false,
     validatorHash: null
   }
 
@@ -14,21 +15,21 @@ export default ({ commit, node }) => {
   }
 
   const actions = {
-    maybeUpdateValidators ({state, commit}, header) {
+    getValidators ({state, commit}) {
+      state.loading = true
+      node.rpc.validators((err, { validators }) => {
+        if (err) return console.error('error fetching validator set')
+        commit('setValidators', validators)
+        state.loading = false
+      })
+    },
+    maybeUpdateValidators ({state, commit, dispatch}, header) {
       let validatorHash = header.validators_hash
       if (validatorHash === state.validatorHash) return
       commit('setValidatorHash', validatorHash)
-      getValidators()
+      dispatch('getValidators')
     }
   }
 
-  function getValidators () {
-    node.rpc.validators((err, { validators }) => {
-      if (err) return console.error('error fetching validator set')
-      commit('setValidators', validators)
-    })
-  }
-  getValidators()
-
   return { state, mutations, actions }
 }

app/src/renderer/vuex/modules/wallet.js

@@ -5,8 +5,10 @@ let root = require('../../../root.js')
 export default ({ commit, node }) => {
   let state = {
     balances: [],
+    balancesLoading: false,
     key: { address: '' },
     history: [],
+    historyLoading: false,
     denoms: [],
     blockMetas: []
   }
@@ -49,17 +51,23 @@ export default ({ commit, node }) => {
       dispatch('queryWalletHistory')
     },
     async queryWalletBalances ({ state, rootState, commit }) {
+      state.balancesLoading = true
       let res = await node.queryAccount(state.key.address)
-      if (!res) return
+      if (!res) {
+        state.balancesLoading = false
+        return
+      }
       commit('setWalletBalances', res.data.coins)
       for (let coin of res.data.coins) {
         if (coin.denom === rootState.config.bondingDenom) {
           commit('setAtoms', coin.amount)
           break
         }
       }
+      state.balancesLoading = false
     },
     async queryWalletHistory ({ state, commit, dispatch }) {
+      state.historyLoading = true
       let res = await node.coinTxs(state.key.address)
       if (!res) return
       commit('setWalletHistory', res)
@@ -70,9 +78,10 @@ export default ({ commit, node }) => {
           blockHeights.push(t.height)
         }
       })
-      return Promise.all(blockHeights.map(h =>
+      await Promise.all(blockHeights.map(h =>
         dispatch('queryTransactionTime', h)
       ))
+      state.historyLoading = false
     },
     async queryTransactionTime ({ commit, dispatch }, blockHeight) {
       let blockMetaInfo = await dispatch('queryBlockInfo', blockHeight)