Change detection refactoring.

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">
-      <tr *ngFor="let tx of transactions; trackBy: trackByFn">
+    <tbody *ngIf="transactions.value; else loadingTmpl">
+      <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 { switchMap, tap, map } from 'rxjs/operators';
+import { Subject, merge, Observable, of } from 'rxjs';
+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[];
-  totalCount: number;
+  transactions$: Observable<[BisqTransaction[], 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))
-      )
-      .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);
+        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)])
+      );
   }
 
   pageChange(page: number) {