From fb83c1513da186d007fdd264f1c2e950a259ee47 Mon Sep 17 00:00:00 2001
From: Aditya Hegde <adityahegderocks@gmail.com>
Date: Wed, 29 May 2024 17:33:36 +0530
Subject: [PATCH] Teardown watcher when out of focus (#4979)

---
 .../entity-management/ResourceWatcher.svelte     |  4 ++--
 .../src/runtime-client/watch-request-client.ts   | 16 ++++++++++++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/web-common/src/features/entity-management/ResourceWatcher.svelte b/web-common/src/features/entity-management/ResourceWatcher.svelte
index 0b00ae6e757..a79e770c956 100644
--- a/web-common/src/features/entity-management/ResourceWatcher.svelte
+++ b/web-common/src/features/entity-management/ResourceWatcher.svelte
@@ -24,8 +24,8 @@
     void fileArtifacts.init(queryClient, instanceId);
 
     return () => {
-      fileWatcher.cancel();
-      resourceWatcher.cancel();
+      fileWatcher.close();
+      resourceWatcher.close();
       stopJavascriptErrorListeners?.();
     };
   });
diff --git a/web-common/src/runtime-client/watch-request-client.ts b/web-common/src/runtime-client/watch-request-client.ts
index 04cb362beef..d896d79b56e 100644
--- a/web-common/src/runtime-client/watch-request-client.ts
+++ b/web-common/src/runtime-client/watch-request-client.ts
@@ -47,6 +47,7 @@ export class WatchRequestClient<Res extends WatchResponse> {
     ["response", []],
     ["reconnect", []],
   ]);
+  private closed = false;
 
   public on<K extends keyof EventMap<Res>>(
     event: K,
@@ -61,18 +62,19 @@ export class WatchRequestClient<Res extends WatchResponse> {
     this.listen().catch(console.error);
   }
 
-  public cancel() {
-    this.controller?.abort();
-    this.stream = this.controller = undefined;
+  public close() {
+    this.closed = true;
+    this.cancel();
   }
 
   public throttle() {
     this.outOfFocusThrottler.throttle(() => {
-      this.cancel();
+      this.close();
     });
   }
 
   public async reconnect() {
+    this.closed = true;
     clearTimeout(this.reconnectTimeout);
 
     if (this.outOfFocusThrottler.isThrottling()) {
@@ -94,6 +96,11 @@ export class WatchRequestClient<Res extends WatchResponse> {
     this.listen(true).catch(console.error);
   }
 
+  private cancel() {
+    this.controller?.abort();
+    this.stream = this.controller = undefined;
+  }
+
   private async listen(reconnect = false) {
     clearTimeout(this.reconnectTimeout);
 
@@ -124,6 +131,7 @@ export class WatchRequestClient<Res extends WatchResponse> {
       clearTimeout(this.retryTimeout);
 
       if (this.controller) this.cancel();
+      if (this.closed) return;
       this.reconnect().catch((e) => {
         throw new Error(e);
       });