Loading indicator service indicating mempool sync status.

frontend/src/app/dashboard/dashboard.component.html

@@ -179,8 +179,8 @@
 <ng-template #txPerSecond let-mempoolInfoData>
   <h5 class="card-title" i18n="dashboard.incoming-transactions">Incoming transactions</h5>
   <ng-template [ngIf]="mempoolInfoData.value" [ngIfElse]="loading">
-    <span *ngIf="mempoolInfoData.value.vBytesPerSecond === 0; else inSync">
-      &nbsp;<span class="badge badge-pill badge-warning" i18n="dashboard.backend-is-synchronizing">Backend is synchronizing</span>
+    <span *ngIf="(mempoolLoadingStatus$ | async) !== 100; else inSync">
+      &nbsp;<span class="badge badge-pill badge-warning"><ng-container i18n="dashboard.backend-is-synchronizing">Backend is synchronizing</ng-container> ({{ mempoolLoadingStatus$ | async }}%)</span>
     </span>
     <ng-template #inSync>
       <div class="progress sub-text" style="max-width: 250px;">

frontend/src/app/dashboard/dashboard.component.ts

@@ -50,6 +50,7 @@ export class DashboardComponent implements OnInit {
   mempoolBlocksData$: Observable<MempoolBlocksData>;
   mempoolInfoData$: Observable<MempoolInfoData>;
   difficultyEpoch$: Observable<EpochProgress>;
+  mempoolLoadingStatus$: Observable<number>;
   vBytesPerSecondLimit = 1667;
   blocks$: Observable<Block[]>;
   transactions$: Observable<TransactionStripped[]>;
@@ -77,6 +78,9 @@ export class DashboardComponent implements OnInit {
     this.websocketService.want(['blocks', 'stats', 'mempool-blocks', 'live-2h-chart']);
     this.network$ = merge(of(''), this.stateService.networkChanged$);
     this.collapseLevel = this.storageService.getValue('dashboard-collapsed') || 'one';
+    this.mempoolLoadingStatus$ = this.stateService.loadingIndicators$.pipe(
+      map((indicators) => indicators.mempool !== undefined ? indicators.mempool : 100)
+    );
 
     this.languageForm = this.formBuilder.group({
       language: ['']

frontend/src/app/interfaces/websocket.interface.ts

@@ -1,3 +1,4 @@
+import { ILoadingIndicators } from '../services/state.service';
 import { Block, Transaction } from './electrs.interface';
 
 export interface WebsocketResponse {
@@ -15,6 +16,7 @@ export interface WebsocketResponse {
   rbfTransaction?: Transaction;
   transactions?: TransactionStripped[];
   donationConfirmed?: boolean;
+  loadingIndicators?: ILoadingIndicators;
   'track-tx'?: string;
   'track-address'?: string;
   'track-asset'?: string;

frontend/src/app/services/state.service.ts

@@ -13,6 +13,8 @@ interface MarkBlockState {
   txFeePerVSize?: number;
 }
 
+export interface ILoadingIndicators { [name: string]: number; }
+
 export interface Env {
   TESTNET_ENABLED: boolean;
   LIQUID_ENABLED: boolean;
@@ -63,6 +65,7 @@ export class StateService {
   lastDifficultyAdjustment$ = new ReplaySubject<number>(1);
   gitCommit$ = new ReplaySubject<string>(1);
   donationConfirmed$ = new Subject();
+  loadingIndicators$ = new ReplaySubject<ILoadingIndicators>(1);
 
   live2Chart$ = new Subject<OptimizedMempoolStats>();
 

frontend/src/app/services/websocket.service.ts

@@ -270,6 +270,10 @@ export class WebsocketService {
       this.stateService.live2Chart$.next(response['live-2h-chart']);
     }
 
+    if (response.loadingIndicators) {
+      this.stateService.loadingIndicators$.next(response.loadingIndicators);
+    }
+
     if (response.mempoolInfo) {
       this.stateService.mempoolInfo$.next(response.mempoolInfo);
     }