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

Fix accelerator skeleton loader

Browse Source
This commit is contained in:
natsoni 2024-08-02 16:53:34 +02:00
parent c1aaf2f61a
commit 46ecd2a51f
No known key found for this signature in database
GPG Key ID: C65917583181743B
2 changed files with 46 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
View File

@ -4,8 +4,8 @@
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="acceleration-list" *ngIf="accelerationList$ | async as accelerations"> <div class="acceleration-list">
<table *ngIf="!accelerations || accelerations.length; else noData" class="table table-borderless table-fixed"> <table *ngIf="nonEmptyAccelerations; else noData" class="table table-borderless table-fixed">
<thead> <thead>
<th class="txid text-left" i18n="dashboard.latest-transactions.txid">TXID</th> <th class="txid text-left" i18n="dashboard.latest-transactions.txid">TXID</th>
<ng-container *ngIf="pending"> <ng-container *ngIf="pending">
@ -21,7 +21,7 @@
<th class="date text-right" i18n="accelerator.requested" *ngIf="!this.widget">Requested</th> <th class="date text-right" i18n="accelerator.requested" *ngIf="!this.widget">Requested</th>
</ng-container> </ng-container>
</thead> </thead>
<tbody *ngIf="accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''"> <tbody *ngIf="accelerationList$ | async as accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<tr *ngFor="let acceleration of accelerations; let i= index;"> <tr *ngFor="let acceleration of accelerations; let i= index;">
<td class="txid text-left"> <td class="txid text-left">
<a [routerLink]="['/tx' | relativeUrl, acceleration.txid]"> <a [routerLink]="['/tx' | relativeUrl, acceleration.txid]">
@ -73,22 +73,47 @@
</tr> </tr>
</tbody> </tbody>
<ng-template #skeleton> <ng-template #skeleton>
<tbody> @if (!pending) {
<tr *ngFor="let item of skeletonLines"> <tbody>
<td class="txid text-left"> <tr *ngFor="let item of skeletonLines">
<span class="skeleton-loader" style="max-width: 75px"></span> <td class="txid text-left">
</td> <span class="skeleton-loader" style="max-width: 200px"></span>
<td class="fee text-right"> </td>
<span class="skeleton-loader" style="max-width: 75px"></span> <td class="fee text-right">
</td> <span class="skeleton-loader" style="max-width: 100px"></span>
<td class="fee-delta text-right"> </td>
<span class="skeleton-loader" style="max-width: 75px"></span> <td class="block text-right">
</td> <span class="skeleton-loader" style="max-width: 100px"></span>
<td class="status text-right"> </td>
<span class="skeleton-loader" style="max-width: 75px"></span> <td class="pool text-right" *ngIf="!this.widget">
</td> <span class="skeleton-loader" style="max-width: 100px"></span>
</tr> </td>
</tbody> <td class="status text-right">
<span class="skeleton-loader" style="max-width: 100px"></span>
</td>
<td class="date text-right" *ngIf="!this.widget">
<span class="skeleton-loader" style="max-width: 100px"></span>
</td>
</tr>
</tbody>
} @else {
<tbody>
<tr *ngFor="let item of skeletonLines">
<td class="txid text-left">
<span class="skeleton-loader" style="max-width: 100px"></span>
</td>
<td class="fee-rate text-right">
<span class="skeleton-loader" style="max-width: 100px"></span>
</td>
<td class="bid text-right">
<span class="skeleton-loader" style="max-width: 100px"></span>
</td>
<td class="time text-right">
<span class="skeleton-loader" style="max-width: 100px"></span>
</td>
</tr>
</tbody>
}
</ng-template> </ng-template>
</table> </table>

2
frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
View File

@ -32,6 +32,7 @@ export class AccelerationsListComponent implements OnInit, OnDestroy {
dir: 'rtl' | 'ltr' = 'ltr'; dir: 'rtl' | 'ltr' = 'ltr';
paramSubscription: Subscription; paramSubscription: Subscription;
pools: { [id: number]: SinglePoolStats } = {}; pools: { [id: number]: SinglePoolStats } = {};
nonEmptyAccelerations: boolean = true;
constructor( constructor(
private servicesApiService: ServicesApiServices, private servicesApiService: ServicesApiServices,
@ -115,6 +116,7 @@ export class AccelerationsListComponent implements OnInit, OnDestroy {
for (const acc of accelerations) { for (const acc of accelerations) {
acc.boost = acc.boostCost != null ? acc.boostCost : acc.bidBoost; acc.boost = acc.boostCost != null ? acc.boostCost : acc.bidBoost;
} }
this.nonEmptyAccelerations = accelerations.length > 0;
if (this.widget) { if (this.widget) {
return of(accelerations.slice(0, 6)); return of(accelerations.slice(0, 6));
} else { } else {