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

Add skeleton to recent blocks on Liquid dashboard

Browse Source
This commit is contained in:
natsoni 2024-02-07 12:41:56 +01:00
parent 0acb797494
commit 20614213a7
No known key found for this signature in database
GPG Key ID: C65917583181743B
1 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -117,22 +117,14 @@
<table class="table lastest-blocks-table"> <table class="table lastest-blocks-table">
<thead> <thead>
<th class="table-cell-height" i18n="dashboard.latest-blocks.height">Height</th> <th class="table-cell-height" i18n="dashboard.latest-blocks.height">Height</th>
<th *ngIf="!stateService.env.MINING_DASHBOARD" class="table-cell-mined" i18n="dashboard.latest-blocks.mined">Mined</th> <th class="table-cell-mined" i18n="dashboard.latest-blocks.mined">Mined</th>
<th *ngIf="stateService.env.MINING_DASHBOARD" class="table-cell-mined pl-lg-4" i18n="mining.pool-name">Pool</th>
<th class="table-cell-transaction-count" i18n="dashboard.latest-blocks.transaction-count">TXs</th> <th class="table-cell-transaction-count" i18n="dashboard.latest-blocks.transaction-count">TXs</th>
<th class="table-cell-size" i18n="dashboard.latest-blocks.size">Size</th> <th class="table-cell-size" i18n="dashboard.latest-blocks.size">Size</th>
</thead> </thead>
<tbody> <tbody *ngIf="blocks$ | async as blocks; else blocksSkeleton">
<tr *ngFor="let block of blocks$ | async; let i = index; trackBy: trackByBlock"> <tr *ngFor="let block of blocks; let i = index; trackBy: trackByBlock">
<td class="table-cell-height" ><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td> <td class="table-cell-height" ><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
<td *ngIf="!stateService.env.MINING_DASHBOARD" class="table-cell-mined" ><app-time kind="since" [time]="block.timestamp" [fastRender]="true"></app-time></td> <td class="table-cell-mined" ><app-time kind="since" [time]="block.timestamp" [fastRender]="true"></app-time></td>
<td *ngIf="stateService.env.MINING_DASHBOARD" class="table-cell-mined pl-lg-4">
<a class="clear-link" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
<img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
onError="this.src = '/resources/mining-pools/default.svg'">
<span class="pool-name">{{ block.extras.pool.name }}</span>
</a>
</td>
<td class="table-cell-transaction-count">{{ block.tx_count | number }}</td> <td class="table-cell-transaction-count">{{ block.tx_count | number }}</td>
<td class="table-cell-size"> <td class="table-cell-size">
<div class="progress"> <div class="progress">
@ -221,6 +213,17 @@
</tbody> </tbody>
</ng-template> </ng-template>
<ng-template #blocksSkeleton>
<tbody>
<tr *ngFor="let i of [1,2,3,4,5,6]">
<td class="table-cell-height"><div class="skeleton-loader skeleton-loader-transactions"></div> </td>
<td class="table-cell-mined"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
<td class="table-cell-transaction-count"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
<td class="table-cell-size"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
</tr>
</tbody>
</ng-template>
<ng-template #loadingTransactions> <ng-template #loadingTransactions>
<div class="skeleton-loader skeleton-loader-transactions"></div> <div class="skeleton-loader skeleton-loader-transactions"></div>
</ng-template> </ng-template>