Fix pizza tracker loading state

frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html

@@ -335,7 +335,7 @@
                 <app-bitcoin-invoice style="width: 100%;" [invoiceId]="invoice.btcpayInvoiceId" [minimal]="true" (completed)="closeModal(2000)"></app-bitcoin-invoice>
               } @else {
                 <span>Loading invoice...</span>
-                <div class="ml-2 spinner-border text-light" style="width: 25px; height: 25px"></div>
+                <div class="m-4 spinner-border text-light" style="width: 25px; height: 25px"></div>
               }
             </div>
             @if (canPayWithCashapp) {

frontend/src/app/components/tracker/tracker.component.html

@@ -115,7 +115,12 @@
     </div>
 
     <div class="bottom-panel">
-      @if (showAccelerationSummary && !accelerationFlowCompleted) {
+      @if (isLoading) {
+        <div class="progress-icon">
+          <div class="spinner-border text-light" style="width: 1em; height: 1em"></div>
+        </div>
+        <span class="explainer">&nbsp;</span>
+      } @else if (showAccelerationSummary && !accelerationFlowCompleted) {
         <ng-container *ngIf="(ETA$ | async) as eta;">
           <app-accelerate-checkout *ngIf="(da$ | async) as da;" [forceSummary]="true" [cashappEnabled]="accelerationEligible" [advancedEnabled]="false" [forceMobile]="true" [tx]="tx" [miningStats]="miningStats" [eta]="eta" (close)="accelerationFlowCompleted = true" [scrollEvent]="scrollIntoAccelPreview" class="h-100 w-100"></app-accelerate-checkout>
         </ng-container>

frontend/src/app/components/tracker/tracker.component.ts

@@ -63,8 +63,9 @@ export class TrackerComponent implements OnInit, OnDestroy {
   mempoolPosition: MempoolPosition;
   accelerationPositions: AccelerationPosition[];
   isLoadingTx = true;
-  error: any = undefined;
   loadingCachedTx = false;
+  loadingPosition = true;
+  error: any = undefined;
   waitingForTransaction = false;
   latestBlock: BlockExtended;
   transactionTime = -1;
@@ -148,13 +149,6 @@ export class TrackerComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.onResize();
 
-    window['setStage'] = ((stage: TrackerStage) => {
-      this.zone.run(() => {
-        this.trackerStage = stage;
-        this.cd.markForCheck();
-      });
-    }).bind(this);
-
     this.acceleratorAvailable = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
 
     const urlParams = new URLSearchParams(window.location.search);
@@ -361,6 +355,7 @@ export class TrackerComponent implements OnInit, OnDestroy {
     this.mempoolPositionSubscription = this.stateService.mempoolTxPosition$.subscribe(txPosition => {
       this.now = Date.now();
       if (txPosition && txPosition.txid === this.txId && txPosition.position) {
+        this.loadingPosition = false;
         this.mempoolPosition = txPosition.position;
         this.accelerationPositions = txPosition.accelerationPositions;
         if (this.tx && !this.tx.status.confirmed) {
@@ -443,6 +438,7 @@ export class TrackerComponent implements OnInit, OnDestroy {
       ))
       .subscribe((tx: Transaction) => {
           if (!tx) {
+            this.loadingPosition = false;
             this.fetchCachedTx$.next(this.txId);
             this.seoService.logSoft404();
             return;
@@ -475,6 +471,7 @@ export class TrackerComponent implements OnInit, OnDestroy {
             }
           } else {
             this.trackerStage = 'confirmed';
+            this.loadingPosition = false;
             this.fetchAcceleration$.next(tx.status.block_hash);
             this.fetchMiningInfo$.next({ hash: tx.status.block_hash, height: tx.status.block_height, txid: tx.txid });
             this.transactionTime = 0;
@@ -735,12 +732,17 @@ export class TrackerComponent implements OnInit, OnDestroy {
     return false;
   }
 
+  get isLoading(): boolean {
+    return this.isLoadingTx || this.loadingCachedTx || this.loadingPosition;
+  }
+
   resetTransaction() {
     this.error = undefined;
     this.tx = null;
     this.txChanged$.next(true);
     this.waitingForTransaction = false;
     this.isLoadingTx = true;
+    this.loadingPosition = true;
     this.rbfTransaction = undefined;
     this.replaced = false;
     this.latestReplacement = '';