show "loading" message while checking for cached txs

This commit is contained in:
Mononaut 2023-07-11 15:49:38 +09:00
parent 243fd5e9dd
commit 415b70da14
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
2 changed files with 18 additions and 3 deletions

View File

@ -453,11 +453,18 @@
<ng-template [ngIf]="error">
<div class="text-center" *ngIf="loadingCachedTx; else waitingTemplate">
<h3 i18n="transaction.error.transaction-not-found">Loading transaction</h3>
<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">

View File

@ -39,6 +39,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
isLoadingTx = true;
error: any = undefined;
errorUnblinded: any = undefined;
loadingCachedTx = false;
waitingForTransaction = false;
latestBlock: BlockExtended;
transactionTime = -1;
@ -199,6 +200,9 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
this.fetchCachedTxSubscription = this.fetchCachedTx$
.pipe(
tap(() => {
this.loadingCachedTx = true;
}),
switchMap((txId) =>
this.apiService
.getRbfCachedTx$(txId)
@ -207,6 +211,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
return of(null);
})
).subscribe((tx) => {
this.loadingCachedTx = false;
if (!tx) {
return;
}
@ -221,6 +226,7 @@ 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;
@ -338,6 +344,7 @@ 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.websocketService.startTrackTransaction(tx.txid);
this.graphExpanded = false;
@ -409,6 +416,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
this.txReplacedSubscription = this.stateService.txReplaced$.subscribe((rbfTransaction) => {
if (!this.tx) {
this.error = new Error();
this.loadingCachedTx = false;
this.waitingForTransaction = false;
}
this.rbfTransaction = rbfTransaction;