fix: multiple polling from useOnline

Author: AbhishekA1509

src/components/common/Banner/Banner.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import {
     AnimatePresence,
@@ -83,36 +83,24 @@ export const Banner = () => {
     const [showAnnouncementBanner, setShowAnnouncementBanner] = useState(
         ANNOUNCEMENT_CONFIG.message ? shouldShowAnnouncementBanner() : false,
     )
-    const hasShownOnlineBanner = useRef(false)
     const onlineTimer = useRef<ReturnType<typeof setTimeout>>(null)
 
-    const onOnline = useCallback(() => {
-        // Only show the online banner if we haven't shown it since the last offline state
-        if (!hasShownOnlineBanner.current) {
-            setShowOnlineBanner(true)
-            hasShownOnlineBanner.current = true
-
-            // Clear any existing timer before setting a new one
-            if (onlineTimer.current) {
-                clearTimeout(onlineTimer.current)
-            }
-
-            onlineTimer.current = setTimeout(() => setShowOnlineBanner(false), ONLINE_BANNER_TIMEOUT)
+    const onOnline = () => {
+        if (onlineTimer.current) {
+            clearTimeout(onlineTimer.current)
         }
-    }, [])
 
-    const onOffline = () => {
-        hasShownOnlineBanner.current = false
+        setShowOnlineBanner(true)
+        onlineTimer.current = setTimeout(() => setShowOnlineBanner(false), ONLINE_BANNER_TIMEOUT)
     }
 
-    const isOnline = useOnline({ onOnline, onOffline })
+    const isOnline = useOnline({ onOnline })
 
     useEffect(
         () => () => {
             if (onlineTimer.current) {
                 clearTimeout(onlineTimer.current)
             }
-            hasShownOnlineBanner.current = false
         },
         [],
     )

src/components/common/hooks/useOnline/useOnline.ts

@@ -1,12 +1,12 @@
 import { useEffect, useRef, useState } from 'react'
 
-import { noop, useMainContext } from '@devtron-labs/devtron-fe-common-lib'
+import { getIsRequestAborted, noop, useMainContext } from '@devtron-labs/devtron-fe-common-lib'
 
 import { getInternetConnectivity } from '@Services/service'
 
 import { INTERNET_CONNECTIVITY_INTERVAL } from '../constants'
 
-export const useOnline = ({ onOnline = noop, onOffline = noop }: { onOnline?: () => void; onOffline?: () => void }) => {
+export const useOnline = ({ onOnline = noop }: { onOnline?: () => void }) => {
     const [online, setOnline] = useState(structuredClone(navigator.onLine))
     const abortControllerRef = useRef<AbortController>(new AbortController())
     const timeoutRef = useRef<NodeJS.Timeout>(null)
@@ -24,14 +24,18 @@ export const useOnline = ({ onOnline = noop, onOffline = noop }: { onOnline?: ()
 
         try {
             await getInternetConnectivity(abortControllerRef.current)
-            setOnline(true)
-            if (online) {
-                onOnline()
-            }
-        } catch {
-            setOnline(false)
-        } finally {
+            setOnline((prev) => {
+                if (!prev) {
+                    onOnline()
+                }
+                return true
+            })
             timeoutRef.current = setTimeout(checkConnectivity, INTERNET_CONNECTIVITY_INTERVAL)
+        } catch (error) {
+            setOnline(false)
+            if (!getIsRequestAborted(error)) {
+                timeoutRef.current = setTimeout(checkConnectivity, INTERNET_CONNECTIVITY_INTERVAL)
+            }
         }
     }
     const handleOffline = () => {
@@ -40,9 +44,6 @@ export const useOnline = ({ onOnline = noop, onOffline = noop }: { onOnline?: ()
         }
         abortControllerRef.current.abort()
         setOnline(false)
-        if (onOffline) {
-            onOffline()
-        }
     }
 
     const handleOnline = async () => {