Adding a global websocket loader observable.

fixes #95

frontend/src/app/components/blockchain/blockchain.component.html

@@ -10,8 +10,7 @@
     <ng-template [ngIf]="isLoading">
       <div class="loading-block">
         <h3>Waiting for blocks...</h3>
-        <br>
-        <div class="spinner-border text-light"></div>
+        <div class="spinner-border text-light mt-2"></div>
       </div>
     </ng-template>
 

frontend/src/app/components/blockchain/blockchain.component.ts

@@ -1,21 +1,28 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { StateService } from 'src/app/services/state.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-blockchain',
   templateUrl: './blockchain.component.html',
   styleUrls: ['./blockchain.component.scss']
 })
-export class BlockchainComponent implements OnInit {
+export class BlockchainComponent implements OnInit, OnDestroy {
   txTrackingLoading = false;
   txShowTxNotFound = false;
   isLoading = true;
+  subscription: Subscription;
 
   constructor(
     private stateService: StateService,
   ) {}
 
   ngOnInit() {
-    this.stateService.blocks$.subscribe(() => this.isLoading = false);
+    this.subscription = this.stateService.isLoadingWebSocket$
+      .subscribe((isLoading) => this.isLoading = isLoading);
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
   }
 }

frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts

@@ -68,7 +68,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
 
     this.stateService.blocks$
       .subscribe(([block]) => {
-        if (block.matchRate >= 80 && !this.tabHidden) {
+        if (block.matchRate >= 66 && !this.tabHidden) {
           this.blockIndex++;
         }
       });

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

@@ -29,6 +29,7 @@ export class StateService {
   txReplaced$ = new Subject<Transaction>();
   mempoolTransactions$ = new Subject<Transaction>();
   blockTransactions$ = new Subject<Transaction>();
+  isLoadingWebSocket$ = new ReplaySubject<boolean>(1);
 
   live2Chart$ = new Subject<OptimizedMempoolStats>();
 

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

@@ -52,16 +52,17 @@ export class WebsocketService {
 
       this.startSubscription();
     });
-
   }
 
   startSubscription(retrying = false) {
+    this.stateService.isLoadingWebSocket$.next(true);
     if (retrying) {
       this.stateService.connectionState$.next(1);
     }
     this.websocketSubject.next({'action': 'init'});
     this.subscription = this.websocketSubject
       .subscribe((response: WebsocketResponse) => {
+        this.stateService.isLoadingWebSocket$.next(false);
         if (response.blocks && response.blocks.length) {
           const blocks = response.blocks;
           blocks.forEach((block: Block) => {