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

* 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

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>