Jordan/2183 fix page network block loading

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Added
 
 - [\#1306](https://github.com/cosmos/voyager/issues/1306) Withdraw fee distribution rewards @fedekunze
+- [\#2183](https://github.com/cosmos/voyager/issues/2183) Loading block to network block loader @jbibla
 
 ### Changed
 

app/src/renderer/components/common/ActionModal.vue

@@ -5,7 +5,7 @@
  <img
  class="icon action-modal-atom"
  src="~assets/images/cosmos-logo.png"
- />
+ >
  <span class="action-modal-title">
  {{ session.signedIn ? title : `Sign in required` }}
  </span>

app/src/renderer/components/common/TmHardwareState.vue

@@ -1,6 +1,6 @@
 <template>
  <div class="tm-hardware-state">
- <img v-if="loading" src="~assets/images/loader.svg" >
+ <img v-if="loading" src="~assets/images/loader.svg">
  <i class="tm-hardware-state__icon material-icons">{{ icon }}</i>
  <div class="tm-hardware-state__label">
  <slot />

app/src/renderer/components/network/PageNetwork.vue

@@ -40,19 +40,23 @@
  <dl class="info_dl">
  <dt>Total Liquid {{ bondDenom }}</dt>
  <dd id="loose_tokens">
- {{ pool.pool && pool.pool.not_bonded_tokens ? num.pretty(
- num.atoms(pool.pool.not_bonded_tokens)
- ) : `n/a` }}
+ {{
+ pool.pool && pool.pool.not_bonded_tokens
+ ? num.pretty(num.atoms(pool.pool.not_bonded_tokens))
+ : `n/a`
+ }}
  </dd>
  </dl>
  </div>
  <div class="column">
  <dl class="info_dl">
  <dt>Total Delegated {{ bondDenom }}</dt>
  <dd id="bonded_tokens">
- {{ pool.pool && pool.pool.bonded_tokens ? num.pretty(
- num.atoms(pool.pool.bonded_tokens)
- ) : `n/a` }}
+ {{
+ pool.pool && pool.pool.bonded_tokens
+ ? num.pretty(num.atoms(pool.pool.bonded_tokens))
+ : `n/a`
+ }}
  </dd>
  </dl>
  </div>
@@ -63,6 +67,14 @@
  <panel-sort :properties="properties" />
  </thead>
  <tbody>
+ <tr v-if="blocks.length === 0" class="block data-table__row">
+ <td>
+ <img class="loading-icon" src="~assets/images/loader.svg">
+ </td>
+ <td>
+ <img class="loading-icon" src="~assets/images/loader.svg">
+ </td>
+ </tr>
  <tr
  v-for="block in blocks"
  :key="block.header.height"

test/unit/specs/components/network/PageNetwork.spec.js

@@ -61,7 +61,21 @@ describe(`PageNetwork`, () => {
  })
  })
 
- it(`has the expected html structure`, () => {
+ it(`should display the network page with data and the blocks table`, () => {
+ expect(wrapper.vm.$el).toMatchSnapshot()
+ })
+
+ it(`should display the network page with the blocks table in a loading state`, () => {
+ $store.getters.blocks = []
+
+ wrapper = shallowMount(PageNetwork, {
+ localVue,
+ mocks: {
+ $store
+ },
+ stubs: [`router-link`]
+ })
+
  expect(wrapper.vm.$el).toMatchSnapshot()
  })
 

test/unit/specs/components/network/__snapshots__/PageNetwork.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PageNetwork has the expected html structure 1`] = `
+exports[`PageNetwork should display the network page with data and the blocks table 1`] = `
 <tm-page-stub
  data-title="Network"
  subtitle=""
@@ -140,6 +140,8 @@ exports[`PageNetwork has the expected html structure 1`] = `
  </thead>
 
  <tbody>
+ <!---->
+
  <tr
  class="block data-table__row"
  >
@@ -178,3 +180,166 @@ exports[`PageNetwork has the expected html structure 1`] = `
  </table>
 </tm-page-stub>
 `;
+
+exports[`PageNetwork should display the network page with the blocks table in a loading state 1`] = `
+<tm-page-stub
+ data-title="Network"
+ subtitle=""
+ title=""
+>
+ <div
+ class="page-profile__header page-profile__section network"
+ >
+ <div
+ class="row"
+ >
+ <div
+ class="page-profile__header__info"
+ >
+ <div
+ class="page-profile__status-and-title"
+ >
+ <span
+ class="page-profile__status green"
+ />
+
+ <h2
+ class="page-profile__title"
+ >
+
+ gaia-20k
+
+ </h2>
+ </div>
+ </div>
+ </div>
+
+ <div
+ class="row"
+ >
+ <dl
+ class="info_dl colored_dl"
+ >
+ <dt>
+ Block Height
+ </dt>
+
+ <dd>
+ #6,001
+ </dd>
+ </dl>
+
+ <dl
+ class="info_dl colored_dl"
+ >
+ <dt>
+ Last Block
+ </dt>
+
+ <dd>
+ a few seconds ago
+ </dd>
+ </dl>
+
+ <dl
+ class="info_dl colored_dl"
+ >
+ <dt>
+ Transactions
+ </dt>
+
+ <dd>
+ 108
+ </dd>
+ </dl>
+
+ <dl
+ class="info_dl colored_dl"
+ >
+ <dt>
+ Number of Validators
+ </dt>
+
+ <dd>
+ 1
+ </dd>
+ </dl>
+ </div>
+
+ <div
+ class="row"
+ >
+ <div
+ class="column"
+ >
+ <dl
+ class="info_dl"
+ >
+ <dt>
+ Total Liquid stake
+ </dt>
+
+ <dd
+ id="loose_tokens"
+ >
+
+ 0.00
+
+ </dd>
+ </dl>
+ </div>
+
+ <div
+ class="column"
+ >
+ <dl
+ class="info_dl"
+ >
+ <dt>
+ Total Delegated stake
+ </dt>
+
+ <dd
+ id="bonded_tokens"
+ >
+
+ 0.00
+
+ </dd>
+ </dl>
+ </div>
+ </div>
+ </div>
+
+ <table
+ class="blocks data-table"
+ >
+ <thead>
+ <panel-sort-stub
+ properties="[object Object],[object Object]"
+ />
+ </thead>
+
+ <tbody>
+ <tr
+ class="block data-table__row"
+ >
+ <td>
+ <img
+ class="loading-icon"
+ src="~assets/images/loader.svg"
+ />
+ </td>
+
+ <td>
+ <img
+ class="loading-icon"
+ src="~assets/images/loader.svg"
+ />
+ </td>
+ </tr>
+
+ </tbody>
+ </table>
+</tm-page-stub>
+`;