From 46ecd2a51f6d157a805ab52161c869bc4a514f4b Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Fri, 2 Aug 2024 16:53:34 +0200
Subject: [PATCH] Fix accelerator skeleton loader

---
 .../accelerations-list.component.html         | 63 +++++++++++++------
 .../accelerations-list.component.ts           |  2 +
 2 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
index f51cf247b..5bbde41c4 100644
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
+++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
@@ -4,8 +4,8 @@
 
   <div class="clearfix"></div>
 
-  <div class="acceleration-list" *ngIf="accelerationList$ | async as accelerations">
-    <table *ngIf="!accelerations || accelerations.length; else noData" class="table table-borderless table-fixed">
+  <div class="acceleration-list">
+    <table *ngIf="nonEmptyAccelerations; else noData" class="table table-borderless table-fixed">
       <thead>
         <th class="txid text-left" i18n="dashboard.latest-transactions.txid">TXID</th>
         <ng-container *ngIf="pending">
@@ -21,7 +21,7 @@
           <th class="date text-right" i18n="accelerator.requested" *ngIf="!this.widget">Requested</th>
         </ng-container>
       </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;">
           <td class="txid text-left">
             <a [routerLink]="['/tx' | relativeUrl, acceleration.txid]">
@@ -73,22 +73,47 @@
         </tr>
       </tbody>
       <ng-template #skeleton>
-        <tbody>
-          <tr *ngFor="let item of skeletonLines">
-            <td class="txid text-left">
-              <span class="skeleton-loader" style="max-width: 75px"></span>
-            </td>
-            <td class="fee text-right">
-              <span class="skeleton-loader" style="max-width: 75px"></span>
-            </td>
-            <td class="fee-delta text-right">
-              <span class="skeleton-loader" style="max-width: 75px"></span>
-            </td>
-            <td class="status text-right">
-              <span class="skeleton-loader" style="max-width: 75px"></span>
-            </td>
-          </tr>
-        </tbody>
+        @if (!pending) {
+          <tbody>
+            <tr *ngFor="let item of skeletonLines">
+              <td class="txid text-left">
+                <span class="skeleton-loader" style="max-width: 200px"></span>
+              </td>
+              <td class="fee text-right">
+                <span class="skeleton-loader" style="max-width: 100px"></span>
+              </td>
+              <td class="block text-right">
+                <span class="skeleton-loader" style="max-width: 100px"></span>
+              </td>
+              <td class="pool text-right" *ngIf="!this.widget">
+                <span class="skeleton-loader" style="max-width: 100px"></span>
+              </td>
+              <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>
     </table>
 
diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
index 46628bde9..9aa7fad46 100644
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
+++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
@@ -32,6 +32,7 @@ export class AccelerationsListComponent implements OnInit, OnDestroy {
   dir: 'rtl' | 'ltr' = 'ltr';
   paramSubscription: Subscription;
   pools: { [id: number]: SinglePoolStats } = {};
+  nonEmptyAccelerations: boolean = true;
 
   constructor(
     private servicesApiService: ServicesApiServices,
@@ -115,6 +116,7 @@ export class AccelerationsListComponent implements OnInit, OnDestroy {
             for (const acc of accelerations) {
               acc.boost = acc.boostCost != null ? acc.boostCost : acc.bidBoost;
             }
+            this.nonEmptyAccelerations = accelerations.length > 0;
             if (this.widget) {
               return of(accelerations.slice(0, 6));
             } else {