perf: Implement visibility gating in ExploreDataService

Co-authored-by: PR0M3TH3AN <[email protected]>

js/services/exploreDataService.js

@@ -143,9 +143,16 @@ export default class ExploreDataService {
     this.watchHistoryInterval = null;
     this.tagIdfInterval = null;
     this.unsubscribeHandlers = [];
+    this.boundHandleVisibilityChange = this.handleVisibilityChange.bind(this);
   }
 
   initialize() {
+    if (typeof document !== "undefined") {
+      document.addEventListener(
+        "visibilitychange",
+        this.boundHandleVisibilityChange
+      );
+    }
     this.refreshWatchHistoryTagCounts({ force: true, reason: "init" });
     this.refreshTagIdf({ force: true, reason: "init" });
     this.subscribeToUpdates();
@@ -154,18 +161,39 @@ export default class ExploreDataService {
 
   startIntervals() {
     this.clearIntervals();
-    if (Number.isFinite(this.historyRefreshIntervalMs) && this.historyRefreshIntervalMs > 0) {
+
+    // If hidden, do not start intervals (will start on visibility change)
+    if (typeof document !== "undefined" && document.hidden) {
+      return;
+    }
+
+    if (
+      Number.isFinite(this.historyRefreshIntervalMs) &&
+      this.historyRefreshIntervalMs > 0
+    ) {
       this.watchHistoryInterval = setInterval(() => {
         this.refreshWatchHistoryTagCounts({ reason: "interval" });
       }, this.historyRefreshIntervalMs);
     }
-    if (Number.isFinite(this.idfRefreshIntervalMs) && this.idfRefreshIntervalMs > 0) {
+    if (
+      Number.isFinite(this.idfRefreshIntervalMs) &&
+      this.idfRefreshIntervalMs > 0
+    ) {
       this.tagIdfInterval = setInterval(() => {
         this.refreshTagIdf({ reason: "interval" });
       }, this.idfRefreshIntervalMs);
     }
   }
 
+  handleVisibilityChange() {
+    if (typeof document === "undefined") return;
+    if (document.hidden) {
+      this.clearIntervals();
+    } else {
+      this.startIntervals();
+    }
+  }
+
   clearIntervals() {
     if (this.watchHistoryInterval) {
       clearInterval(this.watchHistoryInterval);
@@ -304,6 +332,12 @@ export default class ExploreDataService {
   }
 
   destroy() {
+    if (typeof document !== "undefined") {
+      document.removeEventListener(
+        "visibilitychange",
+        this.boundHandleVisibilityChange
+      );
+    }
     this.clearIntervals();
 
     if (this.watchHistoryRefreshHandle) {