From ba97e6e733ee9c3f03047b36a2f97c476143eeee Mon Sep 17 00:00:00 2001
From: rodribp <rodrigobonilla177@gmail.com>
Date: Fri, 27 Feb 2026 12:29:57 -0600
Subject: [PATCH] fix: bumpy UI when loading accelerationInfo

---
 .../transaction-details.component.html        | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html
index 4ae01e01a..50b8ddbfa 100644
--- a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html
+++ b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html
@@ -46,7 +46,7 @@
 <ng-template #detailsRight>
   <ng-container *ngTemplateOutlet="feeRow"></ng-container>
   <ng-container *ngTemplateOutlet="feeRateRow"></ng-container>
-  @if (!isLoadingTx && !tx?.status?.confirmed && isAcceleration && ((cpfpInfo && hasEffectiveFeeRate) || accelerationInfo)) {
+  @if (!isLoadingTx && !tx?.status?.confirmed && isAcceleration) {
     <ng-container *ngTemplateOutlet="acceleratingRow"></ng-container>
   } @else {
     <ng-container *ngTemplateOutlet="effectiveRateRow"></ng-container>
@@ -275,12 +275,26 @@
 </ng-template>
 
 <ng-template #acceleratingRow>
-  <tr>
-    <td rowspan="2" colspan="2" style="padding: 0;">
-      <app-active-acceleration-box [acceleratedBy]="tx.acceleratedBy" [effectiveFeeRate]="tx.effectiveFeePerVsize" [accelerationInfo]="accelerationInfo" [miningStats]="miningStats" [hasCpfp]="hasCpfp" (toggleCpfp)="toggleCpfp()" [chartPositionLeft]="isMobile"></app-active-acceleration-box>
-    </td>
-  </tr>
-  <tr></tr>
+  @if (accelerationInfo) {
+    <tr>
+      <td rowspan="2" colspan="2" style="padding: 0;">
+        <app-active-acceleration-box [acceleratedBy]="tx.acceleratedBy" [effectiveFeeRate]="tx.effectiveFeePerVsize" [accelerationInfo]="accelerationInfo" [miningStats]="miningStats" [hasCpfp]="hasCpfp" (toggleCpfp)="toggleCpfp()" [chartPositionLeft]="isMobile"></app-active-acceleration-box>
+      </td>
+    </tr>
+    <tr></tr>
+  } @else {
+    <tr>
+      <td rowspan="2" colspan="2"  style="padding: 0;">
+        <table style="width: 100%;">
+          <tbody>
+            <tr><td><span class="skeleton-loader"></span></td></tr>
+            <tr><td><span class="skeleton-loader"></span></td></tr>
+          </tbody>
+        </table>
+      </td>
+    </tr>
+    <tr></tr>
+  }
 </ng-template>
 
 <ng-template #minerRow>