Handle Node Sync in Block Explorer

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

@@ -1,13 +1,19 @@
 <template lang="pug">
 data-msg(icon="rotate_right" spin="true")
-  div(slot="title") Data is loading&hellip;
+  div(slot="title") {{ title }}
   div(slot="subtitle") Please wait a moment.
 </template>
 
 <script>
 import DataMsg from 'common/NiDataMsg'
 export default {
   name: 'ni-data-loading',
-  components: { DataMsg }
+  components: { DataMsg },
+  props: {
+    title: {
+      type: String,
+      default: 'Data is loading…'
+    }
+  }
 }
 </script>

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

@@ -7,7 +7,8 @@ page(title='Block Explorer')
 
   modal-search(type="blocks")
 
-  data-loading(v-if="!blockchain.subscription")
+  data-loading(v-if="blockchain.syncing" title="Node is syncing blockchain…")
+  data-loading(v-if="!blockchain.syncing && !blockchain.subscription")
 
   part(title='Current Block' v-if="blockchain.subscription")
     list-item(dt='Block Height' :dd='num.prettyInt(lastHeader.height)' :to="{ name: 'block', params: { block: lastHeader.height} }")

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

@@ -6,6 +6,7 @@ export default ({ commit, node }) => {
     blockHeight: null, // we remember the height so we can requery the block, if querying failed
     blockLoading: false,
     subscription: false,
+    syncing: true,
     blockMetas: []
   }
 
@@ -69,21 +70,39 @@ export default ({ commit, node }) => {
       blockMetaInfo && state.blockMetas.push(blockMetaInfo)
       return blockMetaInfo
     },
-    subscribeToBlocks ({ commit }) {
-      node.rpc.subscribe({ query: "tm.event = 'NewBlock'" }, (err, event) => {
-        state.subscription = true
+    subscribeToBlocks ({ state, commit, dispatch }) {
+      // ensure we never subscribe twice
+      if (state.subscription) return
 
-        if (err) {
+      function error (err) {
+        state.subscription = false
+        commit('notifyError', { title: `Error subscribing to new blocks`, body: err.message })
+      }
+
+      node.rpc.status((err, status) => {
+        if (err) return error(err)
+
+        if (status.syncing) {
+          // still syncing, let's try subscribing again in 30 seconds
+          state.syncing = true
           state.subscription = false
-          commit('notifyError', { title: `Error subscribing to new blocks`, body: err.message })
+          setTimeout(() => dispatch('subscribeToBlocks'), 30e3)
           return
         }
 
-        state.blocks.unshift(event.data.data.block)
+        state.syncing = false
 
-        if (state.blocks.length === 20) {
-          state.blocks.pop()
-        }
+        node.rpc.subscribe({ query: "tm.event = 'NewBlock'" }, (err, event) => {
+          state.subscription = true
+
+          if (err) return error(err)
+
+          state.blocks.unshift(event.data.data.block)
+
+          if (state.blocks.length === 20) {
+            state.blocks.pop()
+          }
+        })
       })
     }
   }

test/unit/specs/components/monitor/__snapshots__/PageBlocks.spec.js.snap

@@ -45,6 +45,7 @@ exports[`PageBlocks has the expected html structure 1`] = `
 <main class=\\"ni-page-main ps\\">
    <modal-search type=\\"blocks\\"></modal-search>
       <!---->
+      <!---->
    <section class=\\"ni-part\\">
       <div class=\\"ni-part-container\\">
          <header class=\\"ni-part-header\\">

test/unit/specs/store/blockchain.spec.js

@@ -149,4 +149,22 @@ describe('Module: Blockchain', () => {
     expect(store.state.blockchain.blocks.length).toBe(0)
     expect(store.state.notifications[0].title).toContain(`Error subscribing to new blocks`)
   })
+
+  it('should not subscribe if still syncing', async () => {
+    node.rpc.status = (cb) => {
+      cb(null, { syncing: true })
+    }
+    node.rpc.subscribe = jest.fn()
+    store.dispatch('subscribeToBlocks')
+    expect(node.rpc.subscribe.mock.calls.length).toBe(0)
+  })
+
+  it('should subscribe if not syncing', async () => {
+    node.rpc.status = (cb) => {
+      cb(null, { syncing: false })
+    }
+    node.rpc.subscribe = jest.fn()
+    store.dispatch('subscribeToBlocks')
+    expect(node.rpc.subscribe.mock.calls.length).toBe(1)
+  })
 })