mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-12-29 09:44:26 +01:00
Code Issues Projects Releases Wiki Activity

Improved dashboard loading indicators.

Browse Source
This commit is contained in:
softsimon 2020-09-22 12:50:12 +07:00
parent 0464ad4bcf
commit 9e71f1a683
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
2 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/app/dashboard/dashboard.component.html
View File

@ -2,12 +2,12 @@
<div class="container-xl"> <div class="container-xl">
<div class="row row-cols-1 row-cols-md-2" *ngIf="mempoolInfoData$ | async as mempoolInfoData"> <div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
<div class="col mb-4"> <div class="col mb-4">
<div class="card text-center"> <div class="card text-center">
<div class="card-body"> <div class="card-body">
<h5 class="card-title mempoolSize">Mempool size</h5> <h5 class="card-title mempoolSize">Mempool size</h5>
<p class="card-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData">{{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} block<span [hidden]="mempoolBlocksData.blocks <= 1">s</span>)</p> <p class="card-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData; else loading">{{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} block<span [hidden]="mempoolBlocksData.blocks <= 1">s</span>)</p>
</div> </div>
</div> </div>
</div> </div>
@ -15,7 +15,7 @@
<div class="card text-center"> <div class="card text-center">
<div class="card-body"> <div class="card-body">
<h5 class="card-title unconfirmedTx">Unconfirmed transactions</h5> <h5 class="card-title unconfirmedTx">Unconfirmed transactions</h5>
<p class="card-text">{{ mempoolInfoData.memPoolInfo.size | number }}</p> <p class="card-text" *ngIf="mempoolInfoData.value; else loading">{{ mempoolInfoData.value.memPoolInfo.size | number }}</p>
</div> </div>
</div> </div>
</div> </div>
@ -23,14 +23,16 @@
<div class="card text-center"> <div class="card text-center">
<div class="card-body"> <div class="card-body">
<h5 class="card-title txWeightPerSecond">Tx weight per second</h5> <h5 class="card-title txWeightPerSecond">Tx weight per second</h5>
<span *ngIf="mempoolInfoData.vBytesPerSecond === 0; else inSync"> <ng-template [ngIf]="mempoolInfoData.value" [ngIfElse]="loading">
<span *ngIf="mempoolInfoData.value.vBytesPerSecond === 0; else inSync">
&nbsp;<span class="badge badge-pill badge-warning">Backend is synchronizing</span> &nbsp;<span class="badge badge-pill badge-warning">Backend is synchronizing</span>
</span> </span>
<ng-template #inSync> <ng-template #inSync>
<div class="progress sub-text"> <div class="progress sub-text">
<div class="progress-bar {{ mempoolInfoData.progressClass }}" style="padding: 4px;" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth}">{{ mempoolInfoData.vBytesPerSecond | ceil | number }} vB/s</div> <div class="progress-bar {{ mempoolInfoData.value.progressClass }}" style="padding: 4px;" role="progressbar" [ngStyle]="{'width': mempoolInfoData.value.progressWidth}">{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} vB/s</div>
</div> </div>
</ng-template> </ng-template>
</ng-template>
</div> </div>
</div> </div>
</div> </div>
@ -38,7 +40,7 @@
<div class="card text-center"> <div class="card text-center">
<div class="card-body"> <div class="card-body">
<h5 class="card-title txPerSecond">Difficulty epoch</h5> <h5 class="card-title txPerSecond">Difficulty epoch</h5>
<div class="progress" *ngIf="(difficultyEpoch$ | async) as epochData"> <div class="progress" *ngIf="(difficultyEpoch$ | async) as epochData; else loading">
<div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}"><ng-template [ngIf]="epochData.change > 0">+</ng-template>{{ epochData.change | number: '1.0-2' }}%</div> <div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}"><ng-template [ngIf]="epochData.change > 0">+</ng-template>{{ epochData.change | number: '1.0-2' }}%</div>
<div class="progress-bar bg-success" role="progressbar" style="width: 0%" [ngStyle]="{'width': epochData.green}"></div> <div class="progress-bar bg-success" role="progressbar" style="width: 0%" [ngStyle]="{'width': epochData.green}"></div>
<div class="progress-bar bg-danger" role="progressbar" style="width: 1%; background-color: #f14d80;" [ngStyle]="{'width': epochData.red}"></div> <div class="progress-bar bg-danger" role="progressbar" style="width: 1%; background-color: #f14d80;" [ngStyle]="{'width': epochData.red}"></div>
@ -49,3 +51,7 @@
</div> </div>
</div> </div>
<ng-template #loading>
<div class="skeleton-loader"></div>
</ng-template>

4
frontend/src/app/dashboard/dashboard.component.scss
View File

@ -34,3 +34,7 @@
.bg-warning { .bg-warning {
background-color: #b58800 !important; background-color: #b58800 !important;
} }
.skeleton-loader {
width: 200px;
}