Subscription refactoring to increase performance.

frontend/src/app/components/tx-fee-rating/tx-fee-rating.component.ts

@@ -1,15 +1,19 @@
-import { Component, ChangeDetectionStrategy, OnChanges, Input, OnInit, ChangeDetectorRef } from '@angular/core';
+import { Component, ChangeDetectionStrategy, OnChanges, Input, OnInit, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { Transaction, Block } from 'src/app/interfaces/electrs.interface';
 import { StateService } from 'src/app/services/state.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-tx-fee-rating',
   templateUrl: './tx-fee-rating.component.html',
   styleUrls: ['./tx-fee-rating.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TxFeeRatingComponent implements OnInit, OnChanges {
+export class TxFeeRatingComponent implements OnInit, OnChanges, OnDestroy {
   @Input() tx: Transaction;
 
+  blocksSubscription: Subscription;
+
   medianFeeNeeded: number;
   overpaidTimes: number;
   feeRating: number;
@@ -18,13 +22,15 @@ export class TxFeeRatingComponent implements OnInit, OnChanges {
 
   constructor(
     private stateService: StateService,
+    private cd: ChangeDetectorRef,
   ) { }
 
   ngOnInit() {
-    this.stateService.blocks$.subscribe(([block]) => {
+    this.blocksSubscription = this.stateService.blocks$.subscribe(([block]) => {
       this.blocks.push(block);
       if (this.tx.status.confirmed && this.tx.status.block_height === block.height) {
         this.calculateRatings(block);
+        this.cd.markForCheck();
       }
     });
   }
@@ -41,6 +47,10 @@ export class TxFeeRatingComponent implements OnInit, OnChanges {
     }
   }
 
+  ngOnDestroy() {
+    this.blocksSubscription.unsubscribe();
+  }
+
   calculateRatings(block: Block) {
     const feePervByte = this.tx.fee / (this.tx.weight / 4);
     this.medianFeeNeeded = Math.round(block.feeRange[Math.round(block.feeRange.length * 0.5)]);