Changedetection performance improvements.

This commit is contained in:
softsimon
2020-08-02 16:00:08 +07:00
parent fa2a995de6
commit e6fa274aca
5 changed files with 39 additions and 35 deletions

View File

@@ -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>

View File

@@ -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();
});
}