Subscription refactoring to increase performance.

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

@@ -1,12 +1,12 @@
 <div class="text-center" class="blockchain-wrapper">
-  <div class="position-container" [hidden]="isLoading">
+  <div class="position-container" [hidden]="(isLoading$ | async) === true">
     <span>
       <app-mempool-blocks></app-mempool-blocks>
       <app-blockchain-blocks></app-blockchain-blocks>
       <div id="divider"></div>
     </span>
   </div>
-  <div *ngIf="isLoading" class="position-container loading">
+  <div *ngIf="(isLoading$ | async) === true" class="position-container loading">
     <div class="loading-block">
       <h3>Waiting for blocks...</h3>
       <div class="spinner-border text-light mt-2"></div>

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

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