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">
-        <tr *ngFor="let block of blocks; trackBy: trackByFn">
+      <tbody *ngIf="blocks.value; else loadingTmpl">
+        <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 { Subject } from 'rxjs';
+import { switchMap, map } from 'rxjs/operators';
+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[];
-  totalCount: number;
+  blocks$: Observable<[BisqBlock[], 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))
-      )
-      .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);
+        switchMap((page) => this.bisqApiService.listBlocks$((page - 1) * this.itemsPerPage, this.itemsPerPage)),
+        map((response) => [response.body, parseInt(response.headers.get('x-total-count'), 10)]),
+      );
   }
 
   calculateTotalOutput(block: BisqBlock): number {