mirror of
https://github.com/mempool/mempool.git
synced 2025-02-22 14:22:44 +01:00
Adding dashboard skeleton loaders
This commit is contained in:
parent
b86b38398e
commit
46fdb5b30d
2 changed files with 51 additions and 6 deletions
|
@ -233,7 +233,9 @@
|
|||
<ng-container *ngIf="!isMobile || mode !== 'actual'; else emptyBlockInfo"></ng-container>
|
||||
</div>
|
||||
<ng-container *ngIf="network !== 'liquid'">
|
||||
<ng-container *ngTemplateOutlet="isMobile && mode === 'actual' ? actualDetails : expectedDetails"></ng-container>
|
||||
<ng-template [ngIf]="!isLoadingOverview" [ngIfElse]="loadingDetailsSkeletons">
|
||||
<ng-container *ngTemplateOutlet="isMobile && mode === 'actual' ? actualDetails : expectedDetails"></ng-container>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="col-sm" *ngIf="!isMobile">
|
||||
|
@ -245,7 +247,9 @@
|
|||
<ng-container *ngTemplateOutlet="emptyBlockInfo"></ng-container>
|
||||
</div>
|
||||
<ng-container *ngIf="network !== 'liquid'">
|
||||
<ng-container *ngTemplateOutlet="actualDetails"></ng-container>
|
||||
<ng-template [ngIf]="!isLoadingOverview" [ngIfElse]="loadingDetailsSkeletons">
|
||||
<ng-container *ngTemplateOutlet="actualDetails"></ng-container>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -452,5 +456,24 @@
|
|||
</table>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #loadingDetailsSkeletons>
|
||||
<table class="table table-borderless table-striped audit-details-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="w-50" i18n="block.total-fees|Total fees in a block">Total fees</td>
|
||||
<td><span class="skeleton-loader"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n="block.weight">Weight</td>
|
||||
<td><span class="skeleton-loader"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n="mempool-block.transactions">Transactions</td>
|
||||
<td><span class="skeleton-loader"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</ng-template>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
|
|
@ -87,8 +87,8 @@
|
|||
<th class="table-cell-new-fee" i18n="dashboard.new-transaction-fee">New fee</th>
|
||||
<th class="table-cell-badges" i18n="transaction.status|Transaction Status">Status</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let replacement of replacements$ | async;">
|
||||
<tbody *ngIf="replacements$ | async as replacements; else replacementsSkeleton">
|
||||
<tr *ngFor="let replacement of replacements">
|
||||
<td class="table-cell-txid">
|
||||
<a [routerLink]="['/tx' | relativeUrl, replacement.txid]">
|
||||
<app-truncate [text]="replacement.txid" [lastChars]="5"></app-truncate>
|
||||
|
@ -158,8 +158,8 @@
|
|||
<th class="table-cell-fiat" *ngIf="(network$ | async) === ''">{{ currency }}</th>
|
||||
<th class="table-cell-fees" i18n="transaction.fee|Transaction fee">Fee</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let transaction of transactions$ | async; let i = index;">
|
||||
<tbody *ngIf="transactions$ | async as transactions else recentTransactionsSkeleton">
|
||||
<tr *ngFor="let transaction of transactions; let i = index;">
|
||||
<td class="table-cell-txid">
|
||||
<a [routerLink]="['/tx' | relativeUrl, transaction.txid]">
|
||||
<app-truncate [text]="transaction.txid" [lastChars]="5"></app-truncate>
|
||||
|
@ -199,6 +199,28 @@
|
|||
</table>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #replacementsSkeleton>
|
||||
<tbody>
|
||||
<tr *ngFor="let i of [1,2,3,4,5,6]">
|
||||
<td class="table-cell-txid"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
|
||||
<td class="table-cell-old-fee"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
|
||||
<td class="table-cell-new-fee"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
|
||||
<td class="table-cell-badges"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #recentTransactionsSkeleton>
|
||||
<tbody>
|
||||
<tr *ngFor="let i of [1,2,3,4,5,6]">
|
||||
<td class="table-cell-txid"><div class="skeleton-loader skeleton-loader-transactions"></div> </td>
|
||||
<td class="table-cell-satoshis"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
|
||||
<td class="table-cell-fiat" *ngIf="(network$ | async) === ''"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
|
||||
<td class="table-cell-fees"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #loadingTransactions>
|
||||
<div class="skeleton-loader skeleton-loader-transactions"></div>
|
||||
</ng-template>
|
||||
|
|
Loading…
Add table
Reference in a new issue