From c0fb8142245dd0bc1e39268c60972c2cbc3fcc4b Mon Sep 17 00:00:00 2001
From: Kai Vandivier <kpvandivier@gmail.com>
Date: Fri, 4 Apr 2025 11:54:52 +0200
Subject: [PATCH] feat(offline): keep pings active while focus is in iframes

---
 .../dhis2-connection-status.tsx               | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/services/offline/src/lib/dhis2-connection-status/dhis2-connection-status.tsx b/services/offline/src/lib/dhis2-connection-status/dhis2-connection-status.tsx
index eb24222d..f489175d 100644
--- a/services/offline/src/lib/dhis2-connection-status/dhis2-connection-status.tsx
+++ b/services/offline/src/lib/dhis2-connection-status/dhis2-connection-status.tsx
@@ -151,8 +151,16 @@ export const Dhis2ConnectionStatusProvider = ({
         })
         smartIntervalRef.current = smartInterval
 
-        const handleBlur = () => smartInterval.pause()
-        const handleFocus = () => smartInterval.resume()
+        // Use visibility change instead of focus/blur to continue while focus
+        // might be in iframes
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === 'hidden') {
+                smartInterval.pause()
+            } else {
+                // visibilityState === 'visible'
+                smartInterval.resume()
+            }
+        }
         // Pinging when going offline should be low/no-cost in both online and
         // local servers
         const handleOffline = () => smartInterval.invokeCallbackImmediately()
@@ -163,14 +171,15 @@ export const Dhis2ConnectionStatusProvider = ({
             15000
         )
 
-        window.addEventListener('blur', handleBlur)
-        window.addEventListener('focus', handleFocus)
+        document.addEventListener('visibilitychange', handleVisibilityChange)
         window.addEventListener('offline', handleOffline)
         window.addEventListener('online', handleOnline)
 
         return () => {
-            window.removeEventListener('blur', handleBlur)
-            window.removeEventListener('focus', handleFocus)
+            document.removeEventListener(
+                'visibilitychange',
+                handleVisibilityChange
+            )
             window.removeEventListener('offline', handleOffline)
             window.removeEventListener('online', handleOnline)