Changedetection performance improvements.
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user