Loading indicator service indicating mempool sync status.

backend/src/api/loading-indicators.ts

@@ -0,0 +1,32 @@
+import { ILoadingIndicators } from '../mempool.interfaces';
+
+class LoadingIndicators {
+  private loadingIndicators: ILoadingIndicators = {
+    'mempool': 0,
+  };
+  private progressChangedCallback: ((loadingIndicators: ILoadingIndicators) => void) | undefined;
+
+  constructor() { }
+
+  public setProgressChangedCallback(fn: (loadingIndicators: ILoadingIndicators) => void) {
+    this.progressChangedCallback = fn;
+  }
+
+  public setProgress(name: string, progressPercent: number) {
+    const newProgress = Math.round(progressPercent);
+    if (newProgress >= 100) {
+      delete this.loadingIndicators[name];
+    } else {
+      this.loadingIndicators[name] = newProgress;
+    }
+    if (this.progressChangedCallback) {
+      this.progressChangedCallback(this.loadingIndicators);
+    }
+  }
+
+  public getLoadingIndicators() {
+    return this.loadingIndicators;
+  }
+}
+
+export default new LoadingIndicators();

backend/src/api/mempool.ts

@@ -6,6 +6,7 @@ import { Common } from './common';
 import transactionUtils from './transaction-utils';
 import { IBitcoinApi } from './bitcoin/bitcoin-api.interface';
 import bitcoinBaseApi from './bitcoin/bitcoin-base.api';
+import loadingIndicators from './loading-indicators';
 
 class Mempool {
   private inSync: boolean = false;
@@ -90,6 +91,10 @@ class Mempool {
     const diff = transactions.length - currentMempoolSize;
     const newTransactions: TransactionExtended[] = [];
 
+    if (!this.inSync) {
+      loadingIndicators.setProgress('mempool', Object.keys(this.mempoolCache).length / transactions.length * 100);
+    }
+
     for (const txid of transactions) {
       if (!this.mempoolCache[txid]) {
         const transaction = await transactionUtils.$getTransactionExtended(txid, true);
@@ -162,6 +167,7 @@ class Mempool {
     if (!this.inSync && transactions.length === Object.keys(newMempool).length) {
       this.inSync = true;
       logger.info('The mempool is now in sync!');
+      loadingIndicators.setProgress('mempool', 100);
     }
 
     if (this.mempoolChangedCallback && (hasChange || deletedTransactions.length)) {

backend/src/api/websocket-handler.ts

@@ -1,12 +1,13 @@
 import logger from '../logger';
 import * as WebSocket from 'ws';
-import { BlockExtended, TransactionExtended, WebsocketResponse, MempoolBlock, OptimizedStatistic } from '../mempool.interfaces';
+import { BlockExtended, TransactionExtended, WebsocketResponse, MempoolBlock, OptimizedStatistic, ILoadingIndicators } from '../mempool.interfaces';
 import blocks from './blocks';
 import memPool from './mempool';
 import backendInfo from './backend-info';
 import mempoolBlocks from './mempool-blocks';
 import fiatConversion from './fiat-conversion';
 import { Common } from './common';
+import loadingIndicators from './loading-indicators';
 
 class WebsocketHandler {
   private wss: WebSocket.Server | undefined;
@@ -117,6 +118,19 @@ class WebsocketHandler {
     });
   }
 
+  handleLoadingChanged(indicators: ILoadingIndicators) {
+    if (!this.wss) {
+      throw new Error('WebSocket.Server is not set');
+    }
+
+    this.wss.clients.forEach((client: WebSocket) => {
+      if (client.readyState !== WebSocket.OPEN) {
+        return;
+      }
+      client.send(JSON.stringify({ loadingIndicators: indicators }));
+    });
+  }
+
   getInitData(_blocks?: BlockExtended[]) {
     if (!_blocks) {
       _blocks = blocks.getBlocks().slice(-8);
@@ -131,6 +145,7 @@ class WebsocketHandler {
       'transactions': memPool.getLatestTransactions(),
       'git-commit': backendInfo.gitCommitHash,
       'hostname': backendInfo.hostname,
+      'loadingIndicators': loadingIndicators.getLoadingIndicators(),
       ...this.extraInitProperties
     };
   }