Pause backend polling when browser tab/window is hidden

apps/roadrunner-view/src/hooks/useSimulationSessionData.ts

@@ -133,17 +133,37 @@ export const useSimulationSessionData = () => {
   }, [isDataLoaded, bufferNum]);
 
   useEffect(() => {
-    fetchBatch();
+    const doFetch = () => {
+      if (!document.hidden) {
+        fetchBatch();
+      }
+    };
+
+    doFetch();
 
-    const fetchTimer = window.setInterval(fetchBatch, 2500);
-    return () => window.clearInterval(fetchTimer);
+    const fetchTimer = window.setInterval(doFetch, 2500);
+
+    const handleVisibilityChange = () => {
+      if (!document.hidden) {
+        doFetch();
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      window.clearInterval(fetchTimer);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
   }, [fetchBatch]);
 
   // Clear map cache when data source toggles
   useEffect(() => {
     simulationSessionMapRef.current.clear();
     setIsDataLoaded(false);
-    fetchBatch();
+    if (!document.hidden) {
+      fetchBatch();
+    }
   }, [dataSource, fetchBatch]);
 
   return {

apps/roadrunner-view/src/hooks/useVehicleData.ts

@@ -233,12 +233,28 @@ export const useVehicleData = ({
      // If in playback mode, fetch pages every 2.5s. Live is fetched every 250 ms.
     var fetchInterval = playbackOffset === 0 ? 250 : 2500;
 
-    fetchBatchRef.current();
+    const doFetch = () => {
+      if (!document.hidden) {
+        fetchBatchRef.current();
+      }
+    };
+
+    doFetch();
+
+    const fetchTimer = window.setInterval(doFetch, fetchInterval);
+
+    const handleVisibilityChange = () => {
+      if (!document.hidden) {
+        doFetch();
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
 
-    const fetchTimer = window.setInterval(() => {
-      fetchBatchRef.current();
-    }, fetchInterval);
-    return () => window.clearInterval(fetchTimer);
+    return () => {
+      window.clearInterval(fetchTimer);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
   }, [playbackOffset]);
 
   // Run the Playback Engine (High Frequency)