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

Improving loading indicator UX

Browse Source
This commit is contained in:
softsimon 2022-05-18 08:43:24 +04:00
parent 68116ab055
commit 1093efe844
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
3 changed files with 31 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/app/components/address/address.component.html
View File

@ -66,9 +66,14 @@
<div class="text-center"> <div class="text-center">
<ng-template [ngIf]="isLoadingTransactions"> <ng-template [ngIf]="isLoadingTransactions">
<div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
<span class="skeleton-loader"></span> <ng-container *ngIf="addressLoadingStatus$ as addressLoadingStatus">
</div> <div class="header-bg box" style="padding: 12px; margin-bottom: 10px;">
<div class="progress progress-dark">
<div class="progress-bar progress-light" role="progressbar" [ngStyle]="{'width': addressLoadingStatus + '%' }"></div>
</div>
</div>
</ng-container>
<div class="header-bg box"> <div class="header-bg box">
<div class="row" style="height: 107px;"> <div class="row" style="height: 107px;">
@ -81,13 +86,6 @@
</div> </div>
</div> </div>
<ng-container *ngIf="addressLoadingStatus$ | async as addressLoadingStatus">
<br>
<div class="progress progress-dark">
<div class="progress-bar progress-darklight" role="progressbar" [ngStyle]="{'width': addressLoadingStatus + '%' }"></div>
</div>
</ng-container>
</ng-template> </ng-template>
<ng-template [ngIf]="retryLoadMore"> <ng-template [ngIf]="retryLoadMore">
@ -155,3 +153,9 @@
<ng-template #confidentialTd> <ng-template #confidentialTd>
<td i18n="shared.confidential">Confidential</td> <td i18n="shared.confidential">Confidential</td>
</ng-template> </ng-template>
<ng-template #headerLoader>
<div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
<span class="skeleton-loader"></span>
</div>
</ng-template>

24
frontend/src/app/components/block/block.component.html
View File

@ -200,9 +200,13 @@
<ng-template [ngIf]="isLoadingTransactions"> <ng-template [ngIf]="isLoadingTransactions">
<div class="text-center mb-4" class="tx-skeleton"> <div class="text-center mb-4" class="tx-skeleton">
<div class="header-bg box"> <ng-container *ngIf="(txsLoadingStatus$ | async) as txsLoadingStatus; else headerLoader">
<span class="skeleton-loader"></span> <div class="header-bg box">
</div> <div class="progress progress-dark" style="margin: 4px; height: 14px;">
<div class="progress-bar progress-light" role="progressbar" [ngStyle]="{'width': txsLoadingStatus + '%' }"></div>
</div>
</div>
</ng-container>
<div class="header-bg box"> <div class="header-bg box">
<div class="row"> <div class="row">
@ -215,14 +219,6 @@
</div> </div>
</div> </div>
</div> </div>
<ng-container *ngIf="(txsLoadingStatus$ | async) as txsLoadingStatus">
<br>
<div class="progress progress-dark">
<div class="progress-bar progress-darklight" role="progressbar" [ngStyle]="{'width': txsLoadingStatus + '%' }"></div>
</div>
</ng-container>
</div> </div>
</ng-template> </ng-template>
<ngb-pagination class="pagination-container float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination> <ngb-pagination class="pagination-container float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
@ -281,6 +277,12 @@
</div> </div>
</ng-template> </ng-template>
<ng-template #headerLoader>
<div class="header-bg box">
<span class="skeleton-loader"></span>
</div>
</ng-template>
</div> </div>
<br> <br>

4
frontend/src/styles.scss
View File

@ -655,6 +655,10 @@ h1, h2, h3 {
background-color: #24273e; background-color: #24273e;
} }
.progress-light {
background-color: #2e324e;
}
.mt-2-5, .my-2-5 { .mt-2-5, .my-2-5 {
margin-top: 0.75rem !important; margin-top: 0.75rem !important;
} }