From 132923e7db1245aaa0fa4ce6abf61c95a9231582 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 12 Jul 2023 17:43:48 +0900
Subject: [PATCH] Show skeleton loader instead of "Loading transaction..."

---
 .../transaction/transaction.component.html      | 17 +++++------------
 .../transaction/transaction.component.ts        |  1 -
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 8c88d6fc1..203a5df5c 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -306,7 +306,7 @@
 
   </ng-template>
 
-  <ng-template [ngIf]="isLoadingTx && !error">
+  <ng-template [ngIf]="(isLoadingTx && !error) || loadingCachedTx">
 
     <div class="box">
       <div class="row">
@@ -451,21 +451,14 @@
 
   </ng-template>
 
-  <ng-template [ngIf]="error">
+  <ng-template [ngIf]="error && !loadingCachedTx">
 
-    <div class="text-center" *ngIf="loadingCachedTx; else waitingTemplate">
-      <h3 i18n="transaction.error.loading-transaction">Loading transaction</h3>
+    <div class="text-center" *ngIf="waitingForTransaction; else errorTemplate">
+      <h3 i18n="transaction.error.transaction-not-found">Transaction not found.</h3>
+      <h5 i18n="transaction.error.waiting-for-it-to-appear">Waiting for it to appear in the mempool...</h5>
       <div class="spinner-border text-light mt-2"></div>
     </div>
 
-    <ng-template #waitingTemplate>
-      <div class="text-center" *ngIf="waitingForTransaction; else errorTemplate">
-        <h3 i18n="transaction.error.transaction-not-found">Transaction not found.</h3>
-        <h5 i18n="transaction.error.waiting-for-it-to-appear">Waiting for it to appear in the mempool...</h5>
-        <div class="spinner-border text-light mt-2"></div>
-      </div>
-    </ng-template>
-
     <ng-template #errorTemplate>
       <div class="text-center">
         <h3>{{ error.error }}</h3>
diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts
index 08f331e60..797282c7b 100644
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@@ -226,7 +226,6 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
         this.tx.feePerVsize = tx.fee / (tx.weight / 4);
         this.isLoadingTx = false;
         this.error = undefined;
-        this.loadingCachedTx = false;
         this.waitingForTransaction = false;
         this.graphExpanded = false;
         this.transactionTime = tx.firstSeen || 0;