machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI/UX - Add skeleton for blocks preload. (#615)

Browse Source 
* Add skeleton for blocks preload.

* Add e2e testing for skeleton blocks preloader.

* Fix reduce mempool blocks to fit the screen.

* Fix variable naming.
This commit is contained in:
Miguel Medeiros
2021-07-10 10:04:15 -03:00
committed by GitHub
parent 652f88770e
commit 71cf41362f
7 changed files with 99 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
View File

@@ -1,4 +1,4 @@
<div class="mempool-blocks-container">
<div class="mempool-blocks-container" *ngIf="(isLoading$ | async) === false">
<div class="flashing">
<ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
<div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]">
@@ -41,3 +41,11 @@
<ng-template let-i #nextBlockEtaPlural i18n="mempool-blocks.eta-of-next-block-plural|Block Frequency (plural)">In ~{{ i }} minutes</ng-template>
<ng-template let-i #nextBlockEta i18n="mempool-blocks.eta-of-next-block|Block Frequency">In ~{{ i }} minute</ng-template>
<div class="mempool-blocks-container" *ngIf="(isLoading$ | async) === true">
<div class="flashing">
<ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks" let-i="index" [ngForTrackBy]="trackByFn">
<div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]"></div>
</ng-template>
</div>
</div>

29
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core';
import { Subscription, Observable, fromEvent, merge, of } from 'rxjs';
import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
import { StateService } from 'src/app/services/state.service';
@@ -13,10 +13,12 @@ import { feeLevels, mempoolFeeColors } from 'src/app/app.constants';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MempoolBlocksComponent implements OnInit, OnDestroy {
mempoolBlocks: MempoolBlock[];
@Input() isLoading$: Observable<boolean>;
mempoolBlocks: MempoolBlock[] = this.mountEmptyBlocks();
mempoolBlocks$: Observable<MempoolBlock[]>;
mempoolBlocksFull: MempoolBlock[];
mempoolBlocksFull: MempoolBlock[] = this.mountEmptyBlocks();
mempoolBlockStyles = [];
markBlocksSubscription: Subscription;
blockSubscription: Subscription;
@@ -45,6 +47,11 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
) { }
ngOnInit() {
this.mempoolBlocks.map(() => {
this.updateMempoolBlockStyles();
this.calculateTransactionPosition();
});
this.reduceMempoolBlocksToFitScreen(this.mempoolBlocks);
this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
this.mempoolBlocks$ = merge(
@@ -235,4 +242,20 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
}
}
mountEmptyBlocks() {
const emptyBlocks = [];
const numberOfBlocks = 8;
for (let i = 0; i <= numberOfBlocks; i++) {
emptyBlocks.push({
blockSize: 0,
blockVSize: 0,
feeRange: [],
index: 0,
medianFee: 0,
nTx: 0,
totalFees: 0
});
}
return emptyBlocks;
}
}