From dde671930649ba98f1b858a92d0fd4765f340bef Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Fri, 8 Mar 2024 16:47:15 +0000
Subject: [PATCH] Fix stuck Goggles on websocket reconnect

---
 .../block-overview-graph.component.html                     | 2 +-
 .../block-overview-graph.component.scss                     | 1 -
 frontend/src/app/dashboard/dashboard.component.ts           | 2 +-
 frontend/src/app/services/websocket.service.ts              | 6 +++---
 4 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html
index 34d192678..1d13e8b4e 100644
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html
@@ -3,7 +3,7 @@
   <div class="block-overview-graph">
     <canvas class="block-overview-canvas" [class.clickable]="!!hoverTx" #blockCanvas></canvas>
     <div class="loader-wrapper" [class.hidden]="(!isLoading || disableSpinner) && !unavailable">
-      <div *ngIf="isLoading" class="spinner-border ml-3 loading" role="status"></div>
+      <div *ngIf="!unavailable" class="spinner-border ml-3 loading" role="status"></div>
       <div *ngIf="!isLoading && unavailable" class="ml-3" i18n="block.not-available">not available</div>
     </div>
     <app-block-overview-tooltip
diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss
index 92964d948..deb0a6f55 100644
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss
@@ -60,6 +60,5 @@
 
   &.hidden {
     opacity: 0;
-    transition: opacity 500ms;
   }
 }
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index 1f380a99f..c218a1c3f 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -234,7 +234,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
                   acc.unshift(stats);
                   acc = acc.slice(0, 120);
                   return acc;
-                }, mempoolStats)
+                }, (mempoolStats || []))
               ),
             of(mempoolStats)
           );
diff --git a/frontend/src/app/services/websocket.service.ts b/frontend/src/app/services/websocket.service.ts
index ab51a5bbc..b4625b87c 100644
--- a/frontend/src/app/services/websocket.service.ts
+++ b/frontend/src/app/services/websocket.service.ts
@@ -116,7 +116,7 @@ export class WebsocketService {
             this.startMultiTrackTransaction(this.trackingTxId);
           }
           if (this.isTrackingMempoolBlock) {
-            this.startTrackMempoolBlock(this.trackingMempoolBlock);
+            this.startTrackMempoolBlock(this.trackingMempoolBlock, true);
           }
           if (this.isTrackingRbf) {
             this.startTrackRbf(this.isTrackingRbf);
@@ -197,9 +197,9 @@ export class WebsocketService {
     this.websocketSubject.next({ 'track-asset': 'stop' });
   }
 
-  startTrackMempoolBlock(block: number) {
+  startTrackMempoolBlock(block: number, force: boolean = false) {
     // skip duplicate tracking requests
-    if (this.trackingMempoolBlock !== block) {
+    if (force || this.trackingMempoolBlock !== block) {
       this.websocketSubject.next({ 'track-mempool-block': block });
       this.isTrackingMempoolBlock = true;
       this.trackingMempoolBlock = block;