Jordan/2188 page network bug

PENDING.md

@@ -1,7 +1,8 @@
-### Added
+### Fixed
 
-- [\#1959](https://github.com/cosmos/voyager/issues/1959) display transactions on block page @fedekunze
+- [#\2188](https://github.com/cosmos/voyager/issues/2188) Fixed issues with the way we were loading PageNetwork @jbibla
+- [#\2246](https://github.com/cosmos/voyager/issues/2246) Fix from moniker not visible on withdraw txs @faboweb
 
-### Fixed
+### Added
 
-- [#\2246](https://github.com/cosmos/voyager/issues/2246) Fix from moniker not visible on withdraw txs @faboweb
+- [\#1959](https://github.com/cosmos/voyager/issues/1959) display transactions on block page @fedekunze

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

@@ -1,19 +1,20 @@
 <template>
-  <tm-data-msg>
-    <div slot="title">
-      Waiting for connection
+  <div class="tm-data-msg">
+    <img class="tm-data-msg__icon" src="~assets/images/loader.svg">
+    <div class="tm-data-msg__text">
+      <div slot="title" class="tm-data-msg__title">
+        Finding connection
+      </div>
+      <div slot="subtitle" class="tm-data-msg__subtitle">
+        You are currently not connected to a node. We will load this information
+        when a connection is established.
+      </div>
     </div>
-    <div slot="subtitle">
-      You are currently not connected to a node. Voyager will load this data
-      when a connection is established.
-    </div>
-  </tm-data-msg>
+  </div>
 </template>
 
 <script>
-import TmDataMsg from "common/TmDataMsg"
 export default {
-  name: `tm-data-connecting`,
-  components: { TmDataMsg }
+  name: `tm-data-connecting`
 }
 </script>

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

@@ -1,17 +1,32 @@
 <template>
   <div class="tm-page">
-    <tm-page-header v-if="!hideHeader" :tabs="tabs">
-      <h2 v-if="title" slot="title">
+    <tm-page-header
+      v-if="!hideHeader"
+      :tabs="tabs"
+    >
+      <h2
+        v-if="title"
+        slot="title"
+      >
         {{ title }}
       </h2>
-      <h3 v-if="subtitle" slot="subtitle">
+      <h3
+        v-if="subtitle"
+        slot="subtitle"
+      >
         {{ subtitle }}
       </h3>
-      <slot slot="menu-body" name="menu-body">
+      <slot
+        slot="menu-body"
+        name="menu-body"
+      >
         <tm-balance v-if="session.signedIn" />
         <tool-bar :refresh="refreshable" />
       </slot>
-      <slot slot="header-buttons" name="header-buttons" />
+      <slot
+        slot="header-buttons"
+        name="header-buttons"
+      />
     </tm-page-header>
     <main class="tm-page-main">
       <card-sign-in-required v-if="signInRequired && !session.signedIn" />
@@ -20,13 +35,14 @@
         <tm-data-loading v-else-if="!loaded && loading" />
         <tm-data-error v-else-if="error" />
         <slot
-          v-else-if="
-            (!dataset || dataset.length === 0) && this.$slots['no-data']
-          "
+          v-else-if="dataEmpty && this.$slots['no-data']"
           name="no-data"
         />
-        <tm-data-empty v-else-if="!dataset || dataset.length === 0" />
-        <slot v-else name="managed-body" />
+        <tm-data-empty v-else-if="dataEmpty" />
+        <slot
+          v-else
+          name="managed-body"
+        />
       </template>
       <slot />
     </main>
@@ -86,8 +102,8 @@ export default {
       type: Boolean,
       default: undefined
     },
-    dataset: {
-      type: Array,
+    dataEmpty: {
+      type: Boolean,
       default: undefined
     },
     refresh: {

app/src/renderer/components/governance/PageGovernance.vue

@@ -1,11 +1,5 @@
 <template>
-  <tm-page
-    :tabs="tabs"
-    :dataset="proposalList"
-    search="proposals"
-    class="governance"
-    data-title="Governance"
-  >
+  <tm-page :tabs="tabs" class="governance" data-title="Governance">
     <tm-btn
       v-if="session.signedIn"
       id="propose-btn"
@@ -54,9 +48,6 @@ export default {
       `connected`,
       `session`
     ]),
-    proposalList() {
-      return Object.values(this.proposals.proposals)
-    }
   },
   mounted() {
     this.ps = new PerfectScrollbar(this.$el.querySelector(`.tm-page-main`))

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

@@ -1,7 +1,11 @@
 <template>
-  <tm-page data-title="Network">
-    <tm-data-error v-if="!connected" />
-    <template v-else>
+  <tm-page
+    :loading="!lastHeader"
+    :loaded="!!lastHeader"
+    :error="blocks.error"
+    data-title="Network"
+  >
+    <template slot="managed-body">
       <div class="page-profile__header page-profile__section network">
         <div class="row">
           <div class="page-profile__header__info">
@@ -100,13 +104,11 @@ import moment from "moment"
 import { mapGetters } from "vuex"
 import num from "scripts/num"
 import PanelSort from "staking/PanelSort"
-import TmDataError from "common/TmDataError"
 import TmPage from "common/TmPage"
 export default {
   name: `page-network`,
   components: {
     PanelSort,
-    TmDataError,
     TmPage
   },
   data: () => ({

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

@@ -3,7 +3,7 @@
     :loading="transactions.loading"
     :loaded="transactions.loaded"
     :error="transactions.error"
-    :dataset="orderedTransactions"
+    :data-empty="dataEmpty"
     :refresh="refreshTransactions"
     data-title="Transactions"
     :sign-in-required="true"
@@ -73,6 +73,9 @@ export default {
         [this.sort.property],
         [this.sort.order]
       )
+    },
+    dataEmpty() {
+      return this.orderedTransactions.length === 0
     }
   },
   watch: {

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

@@ -3,12 +3,16 @@
     :loading="wallet.loading"
     :loaded="wallet.loaded"
     :error="wallet.error"
-    :dataset="allBalances"
+    :data-empty="dataEmpty"
     :refresh="queryWalletBalances"
     data-title="Wallet"
     :sign-in-required="true"
   >
-    <tm-data-msg id="account_empty_msg" slot="no-data" icon="help_outline">
+    <tm-data-msg
+      id="account_empty_msg"
+      slot="no-data"
+      icon="help_outline"
+    >
       <div slot="title">
         Account empty
       </div>
@@ -72,8 +76,8 @@ export default {
       }
       return balances
     },
-    allBalances() {
-      return this.wallet.balances
+    dataEmpty() {
+      return this.wallet.balances.length === 0
     },
     filteredBalances() {
       return orderBy(

test/unit/specs/components/common/TmPage.spec.js

@@ -37,7 +37,7 @@ describe(`TmPage`, () => {
       store,
       localVue,
       propsData: {
-        dataset: [1, 2, 3],
+        dataEmpty: true
       },
       mocks: {
         $route: {

test/unit/specs/components/common/__snapshots__/TmDataConnecting.spec.js.snap

@@ -4,38 +4,31 @@ exports[`TmDataConnecting has the expected html structure 1`] = `
 <div
   class="tm-data-msg"
 >
-  <div
+  <img
     class="tm-data-msg__icon"
-  >
-    <i
-      class="material-icons"
-    >
-
-    </i>
-  </div>
+    src="~assets/images/loader.svg"
+  />
 
   <div
     class="tm-data-msg__text"
   >
     <div
       class="tm-data-msg__title"
+      slot="title"
     >
-      <div>
-
-    Waiting for connection
-
-      </div>
+
+      Finding connection
+
     </div>
 
     <div
       class="tm-data-msg__subtitle"
+      slot="subtitle"
     >
-      <div>
-
-    You are currently not connected to a node. Voyager will load this data
-    when a connection is established.
-
-      </div>
+
+      You are currently not connected to a node. We will load this information
+      when a connection is established.
+
     </div>
   </div>
 </div>

test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap

@@ -4,7 +4,6 @@ exports[`PageGovernance disables proposal creation if not connected 1`] = `
 <div
   class="tm-page governance"
   data-title="Governance"
-  search="proposals"
 >
   <header
     class="tm-page-header"
@@ -127,7 +126,6 @@ exports[`PageGovernance has the expected html structure 1`] = `
 <div
   class="tm-page governance"
   data-title="Governance"
-  search="proposals"
 >
   <header
     class="tm-page-header"