diff --git a/apps/roadrunner-view/src/hooks/useSimulationSessionData.ts b/apps/roadrunner-view/src/hooks/useSimulationSessionData.ts index f3d1832..8bac608 100644 --- a/apps/roadrunner-view/src/hooks/useSimulationSessionData.ts +++ b/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 { diff --git a/apps/roadrunner-view/src/hooks/useVehicleData.ts b/apps/roadrunner-view/src/hooks/useVehicleData.ts index 6a6f9a7..ea538c5 100644 --- a/apps/roadrunner-view/src/hooks/useVehicleData.ts +++ b/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)