UI optimization for syncing progress highestBlock value

src/lib/client.ts

@@ -11,9 +11,10 @@ import { getStoredBlocks, storeBlocks } from "./blockStorage"
 import {
   emptyClientData,
   FarmedBlock,
-  SubPreDigest
+  SubPreDigest,
+  SyncState
 } from "../lib/types"
-import type { SyncState, EventRecord } from '@polkadot/types/interfaces/system';
+import type { EventRecord } from '@polkadot/types/interfaces/system';
 import { IU8a } from "@polkadot/types-codec/types"
 
 const tauri = { event, invoke }
@@ -132,7 +133,7 @@ export class Client {
   }
 
   public async getSyncState(): Promise<SyncState> {
-    return this.api.rpc.system.syncState();
+    return (await this.api.rpc.system.syncState()).toJSON() as unknown as SyncState;
   }
 
   public async isSyncing(): Promise<boolean> {

src/pages/Dashboard.vue

@@ -58,7 +58,12 @@ export default defineComponent({
       loading: true,
       unsubscribe: () => null,
       peerInterval: 0,
-      clientData: <ClientData>emptyClientData
+      clientData: <ClientData>emptyClientData,
+      syncState: {
+        currentBlock: 0,
+        highestBlock: 0,
+        startingBlock: 0,
+      }
     }
   },
   computed: {
@@ -133,16 +138,21 @@ export default defineComponent({
     async checkNodeAndNetwork() {
       this.network.state = "verifying"
       this.network.message = this.$t('dashboard.verifyingNet')
+      this.syncState = await this.$client.getSyncState();
+      let isSyncing = await this.$client.isSyncing();
 
-      let syncState = await this.$client.getSyncState()
       do {
-        const { currentBlock, highestBlock } = syncState;
-        this.network.message = this.$t('dashboard.syncingMsg', { currentBlock, highestBlock });
         await new Promise((resolve) => setTimeout(resolve, 3000))
-        syncState = await this.$client.getSyncState()
-      } while (syncState.currentBlock.toNumber() < syncState.highestBlock.unwrapOrDefault().toNumber())
+        const newSyncState = await this.$client.getSyncState();
+        if (newSyncState.highestBlock > this.syncState.highestBlock) {
+          this.syncState = newSyncState;
+        } else {
+          this.syncState.currentBlock = newSyncState.currentBlock;
+        }
+        this.network.message = this.$t('dashboard.syncingMsg', { currentBlock: this.syncState.currentBlock, highestBlock: this.syncState.highestBlock });
+      } while (isSyncing)
 
-      this.network.message = this.$t('dashboard.nodeIsSynced', { currentBlock: syncState.currentBlock });
+      this.network.message = this.$t('dashboard.nodeIsSynced', { currentBlock: this.syncState.currentBlock });
       this.network.state = "finished"
     },
     newBlock(blockNumber: number) {

src/pages/PlottingProgress.vue

@@ -123,7 +123,6 @@ import { defineComponent } from "vue"
 import * as util from "../lib/util"
 import introModal from "../components/introModal.vue"
 import { appConfig } from "../lib/appConfig"
-import { SyncState } from "../lib/types";
 
 let farmerTimer: number
 
@@ -220,13 +219,20 @@ export default defineComponent({
       this.plottingData.allocatedGB = config.plot.sizeGB
       await this.$client.startSubscription();
       util.infoLogger("PLOTTING PROGRESS | block subscription started")
-      this.syncState = (await this.$client.getSyncState()).toJSON() as unknown as SyncState;
+
+      // TODO: this currently duplicates syncing logic from Dashboard component and will be removed after Dashboard re-design (only Dashboard component will remain)
+      this.syncState = await this.$client.getSyncState();
       let isSyncing = await this.$client.isSyncing();
 
       do {
         await new Promise((resolve) => setTimeout(resolve, 3000))
-        this.syncState = (await this.$client.getSyncState()).toJSON() as unknown as SyncState;
-        this.plottingData.status = `Syncing ${this.syncState.currentBlock} of ${this.syncState.highestBlock} blocks`
+        const newSyncState = await this.$client.getSyncState();
+        if (newSyncState.highestBlock > this.syncState.highestBlock) {
+          this.syncState = newSyncState;
+        } else {
+          this.syncState.currentBlock = newSyncState.currentBlock;
+        }
+        this.plottingData.status = this.$t('dashboard.syncingMsg', { currentBlock: this.syncState.currentBlock, highestBlock: this.syncState.highestBlock });
         this.plottingData.finishedGB = (this.syncState.currentBlock * this.plottingData.allocatedGB) / this.syncState.highestBlock;
         isSyncing = await this.$client.isSyncing();
       } while (isSyncing);