Change detection refactoring.

frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html

@@ -4,6 +4,8 @@
 
   <div class="clearfix"></div>
 
+  <ng-container *ngIf="{ value: (blocks$ | async) } as blocks">
+
   <div class="table-responsive-sm">
     <table class="table table-borderless table-striped">
       <thead>
@@ -12,8 +14,8 @@
         <th style="width: 25%;">Total Sent</th>
         <th class="d-none d-md-block" style="width: 25%;">Transactions</th>
       </thead>
-      <tbody *ngIf="!isLoading; else loadingTmpl">
+      <tbody *ngIf="blocks.value; else loadingTmpl">
-        <tr *ngFor="let block of blocks; trackBy: trackByFn">
+        <tr *ngFor="let block of blocks.value[0]; trackBy: trackByFn">
           <td><a [routerLink]="['/block/' | relativeUrl, block.hash]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
           <td><app-time-since [time]="block.time / 1000" [fastRender]="true"></app-time-since> ago</td>
           <td>{{ calculateTotalOutput(block) / 100 | number: '1.2-2' }}<span class="d-none d-md-inline"> BSQ</span></td>
@@ -25,12 +27,13 @@
 
   <br>
 
-  <ngb-pagination [size]="paginationSize" [collectionSize]="totalCount" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
+  <ngb-pagination [size]="paginationSize" [collectionSize]="blocks.value ? blocks.value[1] : 0" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
 
+  </ng-container>
 </div>
 
 <ng-template #loadingTmpl>
   <tr *ngFor="let i of loadingItems">
-    <td *ngFor="let j of [1, 2, 3, 4, 5]"><span class="skeleton-loader"></span></td>
+    <td *ngFor="let j of [1, 2, 3, 4]"><span class="skeleton-loader"></span></td>
   </tr>
 </ng-template>

frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts

@@ -1,18 +1,18 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { BisqApiService } from '../bisq-api.service';
-import { switchMap, tap } from 'rxjs/operators';
+import { switchMap, map } from 'rxjs/operators';
-import { Subject } from 'rxjs';
+import { Subject, Observable, of, merge } from 'rxjs';
 import { BisqBlock, BisqOutput, BisqTransaction } from '../bisq.interfaces';
 import { SeoService } from 'src/app/services/seo.service';
 
 @Component({
   selector: 'app-bisq-blocks',
   templateUrl: './bisq-blocks.component.html',
-  styleUrls: ['./bisq-blocks.component.scss']
+  styleUrls: ['./bisq-blocks.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BisqBlocksComponent implements OnInit {
-  blocks: BisqBlock[];
+  blocks$: Observable<[BisqBlock[], number]>;
-  totalCount: number;
   page = 1;
   itemsPerPage: number;
   contentSpace = window.innerHeight - (165 + 75);
@@ -39,20 +39,11 @@ export class BisqBlocksComponent implements OnInit {
       this.paginationMaxSize = 3;
     }
 
-    this.pageSubject$
+    this.blocks$ = merge(of(1), this.pageSubject$)
       .pipe(
-        tap(() => this.isLoading = true),
+        switchMap((page) => this.bisqApiService.listBlocks$((page - 1) * this.itemsPerPage, this.itemsPerPage)),
-        switchMap((page) => this.bisqApiService.listBlocks$((page - 1) * this.itemsPerPage, this.itemsPerPage))
+        map((response) => [response.body, parseInt(response.headers.get('x-total-count'), 10)]),
-      )
+      );
-      .subscribe((response) => {
-        this.isLoading = false;
-        this.blocks = response.body;
-        this.totalCount = parseInt(response.headers.get('x-total-count'), 10);
-      }, (error) => {
-        console.log(error);
-      });
-
-    this.pageSubject$.next(1);
   }
 
   calculateTotalOutput(block: BisqBlock): number {

frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html

@@ -60,6 +60,8 @@
 
   <div class="clearfix"></div>
 
+  <ng-container *ngIf="{ value: (transactions$ | async) } as transactions">
+
   <table class="table table-borderless table-striped">
     <thead>
       <th style="width: 20%;">Transaction</th>
@@ -68,8 +70,8 @@
       <th style="width: 20%;">Confirmed</th>
       <th class="d-none d-md-block" style="width: 20%;">Height</th>
     </thead>
-    <tbody *ngIf="!isLoading; else loadingTmpl">
+    <tbody *ngIf="transactions.value; else loadingTmpl">
-      <tr *ngFor="let tx of transactions; trackBy: trackByFn">
+      <tr *ngFor="let tx of transactions.value[0]; trackBy: trackByFn">
         <td><a [routerLink]="['/tx/' | relativeUrl, tx.id]" [state]="{ data: tx }">{{ tx.id | slice : 0 : 8 }}</a></td>
         <td class="d-none d-md-block">
           <app-bisq-icon class="mr-1" [txType]="tx.txType"></app-bisq-icon>
@@ -92,8 +94,9 @@
 
   <br>
 
-  <ngb-pagination [size]="paginationSize" [collectionSize]="totalCount" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
+  <ngb-pagination [size]="paginationSize" [collectionSize]="transactions.value ? transactions.value[1] : 0" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
 
+  </ng-container>
 </div>
 
 <ng-template #loadingTmpl>

frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts

@@ -1,7 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { BisqTransaction, BisqOutput } from '../bisq.interfaces';
-import { Subject, merge } from 'rxjs';
+import { Subject, merge, Observable, of } from 'rxjs';
-import { switchMap, tap, map } from 'rxjs/operators';
+import { switchMap, map } from 'rxjs/operators';
 import { BisqApiService } from '../bisq-api.service';
 import { SeoService } from 'src/app/services/seo.service';
 import { FormGroup, FormBuilder } from '@angular/forms';
@@ -9,11 +9,11 @@ import { FormGroup, FormBuilder } from '@angular/forms';
 @Component({
   selector: 'app-bisq-transactions',
   templateUrl: './bisq-transactions.component.html',
-  styleUrls: ['./bisq-transactions.component.scss']
+  styleUrls: ['./bisq-transactions.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BisqTransactionsComponent implements OnInit {
-  transactions: BisqTransaction[];
+  transactions$: Observable<[BisqTransaction[], number]>;
-  totalCount: number;
   page = 1;
   itemsPerPage: number;
   contentSpace = window.innerHeight - (165 + 75);
@@ -62,7 +62,8 @@ export class BisqTransactionsComponent implements OnInit {
       this.paginationMaxSize = 3;
     }
 
-    merge(
+    this.transactions$ = merge(
+      of(1),
       this.pageSubject$,
       this.radioGroupForm.valueChanges
         .pipe(
@@ -79,18 +80,9 @@ export class BisqTransactionsComponent implements OnInit {
         )
       )
       .pipe(
-        tap(() => this.isLoading = true),
+        switchMap((page) => this.bisqApiService.listTransactions$((page - 1) * this.itemsPerPage, this.itemsPerPage, this.types)),
-        switchMap((page) => this.bisqApiService.listTransactions$((page - 1) * this.itemsPerPage, this.itemsPerPage, this.types))
+        map((response) =>  [response.body, parseInt(response.headers.get('x-total-count'), 10)])
-      )
+      );
-      .subscribe((response) => {
-        this.isLoading = false;
-        this.transactions = response.body;
-        this.totalCount = parseInt(response.headers.get('x-total-count'), 10);
-      }, (error) => {
-        console.log(error);
-      });
-
-    this.pageSubject$.next(1);
   }
 
   pageChange(page: number) {

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

@@ -7,7 +7,6 @@ import { Observable, merge, of } from 'rxjs';
   selector: 'app-master-page',
   templateUrl: './master-page.component.html',
   styleUrls: ['./master-page.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MasterPageComponent implements OnInit {
   env = env;

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

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