Changedetection performance improvements.

frontend/src/app/components/latest-blocks/latest-blocks.component.html

@@ -1,4 +1,4 @@
-<app-fees-box *ngIf="network === ''" class="d-block mr-2 ml-2 mb-4"></app-fees-box>
+<app-fees-box *ngIf="(network$ | async) === ''" class="d-block mr-2 ml-2 mb-4"></app-fees-box>
 
 <div class="container-xl">
 <hr>
@@ -19,7 +19,7 @@
       <td class="d-none d-lg-block">{{ block.tx_count | number }}</td>
       <td>
         <div class="progress position-relative">
-          <div class="progress-bar progress-mempool {{ network }}" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }"></div>
+          <div class="progress-bar progress-mempool {{ network$ | async }}" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }"></div>
           <div class="progress-text">{{ block.size | bytes: 2 }}</div>
         </div>
       </td>

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

@@ -1,17 +1,18 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { StateService } from '../../services/state.service';
 import { Block } from '../../interfaces/electrs.interface';
-import { Subscription } from 'rxjs';
+import { Subscription, Observable, merge, of } from 'rxjs';
 import { SeoService } from 'src/app/services/seo.service';
 
 @Component({
   selector: 'app-latest-blocks',
   templateUrl: './latest-blocks.component.html',
   styleUrls: ['./latest-blocks.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LatestBlocksComponent implements OnInit, OnDestroy {
-  network = '';
+  network$: Observable<string>;
 
   blocks: any[] = [];
   blockSubscription: Subscription;
@@ -27,11 +28,12 @@ export class LatestBlocksComponent implements OnInit, OnDestroy {
     private electrsApiService: ElectrsApiService,
     private stateService: StateService,
     private seoService: SeoService,
+    private cd: ChangeDetectorRef,
   ) { }
 
   ngOnInit() {
     this.seoService.resetTitle();
-    this.stateService.networkChanged$.subscribe((network) => this.network = network);
+    this.network$ = merge(of(''), this.stateService.networkChanged$);
 
     this.blockSubscription = this.stateService.blocks$
       .subscribe(([block]) => {
@@ -57,6 +59,7 @@ export class LatestBlocksComponent implements OnInit, OnDestroy {
 
         this.blocks.pop();
         this.blocks.unshift(block);
+        this.cd.markForCheck();
       });
 
     this.loadInitialBlocks();
@@ -80,6 +83,7 @@ export class LatestBlocksComponent implements OnInit, OnDestroy {
         if (chunks > 0) {
           this.loadMore(chunks);
         }
+        this.cd.markForCheck();
       });
   }
 
@@ -97,6 +101,7 @@ export class LatestBlocksComponent implements OnInit, OnDestroy {
         if (chunksLeft > 0) {
           this.loadMore(chunksLeft);
         }
+        this.cd.markForCheck();
       });
   }
 

frontend/src/app/components/master-page/master-page.component.html

@@ -1,22 +1,25 @@
+<ng-container *ngIf="{ val: network$ | async } as network">
 <header>
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
   <a class="navbar-brand" [routerLink]="['/' | relativeUrl]" style="position: relative;">
-    <img src="./resources/mempool-logo.png" height="35" width="140" class="logo" [ngStyle]="{'opacity': connectionState === 2 ? 1 : 0.5 }">
+    <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
-    <div class="badge badge-warning connection-badge" *ngIf="connectionState === 0">Offline</div>
+      <img src="./resources/mempool-logo.png" height="35" width="140" class="logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }">
-    <div class="badge badge-warning connection-badge" style="left: 30px;" *ngIf="connectionState === 1">Reconnecting...</div>
+      <div class="badge badge-warning connection-badge" *ngIf="connectionState.val === 0">Offline</div>
+      <div class="badge badge-warning connection-badge" style="left: 30px;" *ngIf="connectionState.val === 1">Reconnecting...</div>
+    </ng-container>
   </a>
 
 
   <div ngbDropdown display="dynamic" style="margin-right: 16px;" *ngIf="env.TESTNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED">
     <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split" aria-haspopup="true">
-      <img src="./resources/{{ network === '' ? 'bitcoin' : network }}-logo.png" style="width: 25px; height: 25px;" class="mr-1">
+      <img src="./resources/{{ network.val === '' ? 'bitcoin' : network.val }}-logo.png" style="width: 25px; height: 25px;" class="mr-1">
     </button>
     <div ngbDropdownMenu>
       <button ngbDropdownItem class="mainnet" routerLink="/"><img src="./resources/bitcoin-logo.png" style="width: 30px;" class="mr-1"> Mainnet</button>
-      <button ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet" [class.active]="network === 'testnet'" routerLink="/testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</button>
+      <button ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet" [class.active]="network.val === 'testnet'" routerLink="/testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</button>
       <h6 *ngIf="env.LIQUID_ENABLED || env.BISQ_ENABLED" class="dropdown-header">Layer 2 Networks</h6>
-      <button ngbDropdownItem *ngIf="env.BISQ_ENABLED" class="mainnet" [class.active]="network === 'bisq'" routerLink="/bisq"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</button>
+      <button ngbDropdownItem *ngIf="env.BISQ_ENABLED" class="mainnet" [class.active]="network.val === 'bisq'" routerLink="/bisq"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</button>
-      <button ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid" [class.active]="network === 'liquid'" routerLink="/liquid"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</button>
+      <button ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid" [class.active]="network.val === 'liquid'" routerLink="/liquid"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</button>
     </div>
   </div>
 
@@ -25,8 +28,8 @@
   </button>
   
   <div class="navbar-collapse collapse" id="navbarCollapse" [ngClass]="{'show': navCollapsed}">
-    <ul class="navbar-nav mr-auto {{ network }}">
+    <ul class="navbar-nav mr-auto {{ network.val }}">
-      <ng-template [ngIf]="network === 'bisq'" [ngIfElse]="notBisq">
+      <ng-template [ngIf]="network.val === 'bisq'" [ngIfElse]="notBisq">
         <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
           <a class="nav-link" [routerLink]="['/bisq']" (click)="collapse()">Transactions</a>
         </li>
@@ -45,7 +48,7 @@
           <a class="nav-link" [routerLink]="['/tv' | relativeUrl]" (click)="collapse()">TV view &nbsp;<img src="./resources/expand.png" width="15"/></a>
         </li>
       </ng-template>
-      <li *ngIf="network === 'liquid'" class="nav-item" routerLinkActive="active">
+      <li *ngIf="network.val === 'liquid'" class="nav-item" routerLinkActive="active">
         <a class="nav-link" [routerLink]="['/liquid/assets']" (click)="collapse()">Assets</a>
       </li>
       <li class="nav-item" routerLinkActive="active">
@@ -63,8 +66,10 @@
 
 <br>
 
-<ng-template [ngIf]="network !== 'bisq'">
+<ng-container *ngIf="network.val !== 'bisq'">
   <br><br>
 
   <app-footer></app-footer>
-</ng-template>
+</ng-container>
+
+</ng-container>

frontend/src/app/components/master-page/master-page.component.ts

@@ -1,34 +1,27 @@
-import { Component, OnInit, HostListener } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { StateService } from '../../services/state.service';
 import { env } from 'src/app/app.constants';
+import { Observable, merge, of } from 'rxjs';
 
 @Component({
   selector: 'app-master-page',
   templateUrl: './master-page.component.html',
-  styleUrls: ['./master-page.component.scss']
+  styleUrls: ['./master-page.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MasterPageComponent implements OnInit {
-  network = '';
-  tvViewRoute = '/tv';
   env = env;
-
+  network$: Observable<string>;
+  connectionState$: Observable<number>;
   navCollapsed = false;
-  connectionState = 2;
 
   constructor(
     private stateService: StateService,
   ) { }
 
   ngOnInit() {
-    this.stateService.connectionState$
+    this.connectionState$ = this.stateService.connectionState$;
-      .subscribe((state) => {
+    this.network$ = merge(of(''), this.stateService.networkChanged$);
-        this.connectionState = state;
-      });
-
-    this.stateService.networkChanged$
-      .subscribe((network) => {
-        this.network = network;
-      });
   }
 
   collapse(): void {

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

@@ -1,10 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { WebsocketService } from 'src/app/services/websocket.service';
 
 @Component({
   selector: 'app-start',
   templateUrl: './start.component.html',
-  styleUrls: ['./start.component.scss']
+  styleUrls: ['./start.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class StartComponent implements OnInit {
   constructor(