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 87a55cce0c
commit 6095da173f
7 changed files with 99 additions and 18 deletions

View File

@@ -1,4 +1,4 @@
<div class="blocks-container" *ngIf="blocks.length">
<div class="blocks-container" *ngIf="(isLoading$ | async) === false">
<div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
<div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]">
<a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }" class="blockLink">&nbsp;</a>
@@ -24,3 +24,12 @@
</div>
<div [hidden]="!arrowVisible" id="arrow-up" [style.transition]="transition" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
</div>
<div class="blocks-container" *ngIf="(isLoading$ | async) === true">
<div class="flashing">
<div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
<div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]"></div>
</div>
</div>
</div>