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

Replace some spinners with skeleton loaders.

Browse Source
This commit is contained in:
softsimon 2020-03-11 16:06:11 +07:00
parent c0aa9ff925
commit 4d5580eabb
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
6 changed files with 79 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,8 +48,20 @@
<div class="text-center"> <div class="text-center">
<ng-template [ngIf]="isLoadingTransactions"> <ng-template [ngIf]="isLoadingTransactions">
<div class="spinner-border"></div> <div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
<br><br> <span class="skeleton-loader"></span>
</div>
<div class="header-bg box">
<div class="row" style="height: 107px;">
<div class="col-sm">
<span class="skeleton-loader"></span>
</div>
<div class="col-sm">
<span class="skeleton-loader"></span>
</div>
</div>
</div>
</ng-template> </ng-template>
</div> </div>

4
frontend/src/app/components/address/address.component.scss
View File

@ -1,7 +1,3 @@
.header-bg {
font-size: 14px;
}
.qr-wrapper { .qr-wrapper {
background-color: #FFF; background-color: #FFF;
padding: 10px; padding: 10px;

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

@ -90,8 +90,22 @@
<div class="text-center"> <div class="text-center">
<ng-template [ngIf]="isLoadingTransactions"> <ng-template [ngIf]="isLoadingTransactions">
<div class="spinner-border"></div>
<br><br> <div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
<span class="skeleton-loader"></span>
</div>
<div class="header-bg box">
<div class="row" style="height: 107px;">
<div class="col-sm">
<span class="skeleton-loader"></span>
</div>
<div class="col-sm">
<span class="skeleton-loader"></span>
</div>
</div>
</div>
</ng-template> </ng-template>
</div> </div>
@ -141,13 +155,6 @@
</div> </div>
</div> </div>
</div> </div>
<br>
<div class="text-center">
<div class="spinner-border"></div>
<br><br>
</div>
</ng-template> </ng-template>
<ng-template [ngIf]="error"> <ng-template [ngIf]="error">

65
frontend/src/app/components/transaction/transaction.component.html
View File

@ -100,26 +100,55 @@
<h2>Details</h2> <h2>Details</h2>
<div class="box"> <div class="box">
<div class="row"> <table class="table table-borderless table-striped">
<table class="table table-borderless table-striped"> <tbody>
<tbody> <tr>
<tr> <td>Size</td>
<td>Size</td> <td>{{ tx.size | bytes: 2 }}</td>
<td>{{ tx.size | bytes: 2 }}</td> </tr>
</tr> <tr>
<tr> <td>Weight</td>
<td>Weight</td> <td>{{ tx.weight | wuBytes: 2 }}</td>
<td>{{ tx.weight | wuBytes: 2 }}</td> </tr>
</tr> </tbody>
</tbody> </table>
</table> </div>
</div>
</div>
</ng-template> </ng-template>
<ng-template [ngIf]="isLoadingTx && !error"> <ng-template [ngIf]="isLoadingTx && !error">
<div class="box">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
<br>
<h2>Inputs & Outputs</h2>
<div class="box">
<div class="row">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<h2>Details</h2>
<div class="box"> <div class="box">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<tbody> <tbody>
@ -135,12 +164,6 @@
</table> </table>
</div> </div>
<br>
<div class="text-center">
<div class="spinner-border"></div>
<br><br>
</div>
</ng-template> </ng-template>
<ng-template [ngIf]="error"> <ng-template [ngIf]="error">

4
frontend/src/app/components/transactions-list/transactions-list.component.scss
View File

@ -1,7 +1,3 @@
.header-bg {
font-size: 14px;
}
.arrow-td { .arrow-td {
width: 22px; width: 22px;
} }

6
frontend/src/styles.scss
View File

@ -328,4 +328,8 @@ tr {
.md-inline { .md-inline {
display: inline-block; display: inline-block;
} }
} }
.header-bg {
font-size: 14px;
}