fix: streamline timeout handling in useOnline hook and add abort logic in getInternetConnectivity

Author: AbhishekA1509

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

@@ -12,13 +12,17 @@ export const useOnline = ({ onOnline = noop }: { onOnline?: () => void }) => {
     const timeoutRef = useRef<NodeJS.Timeout>(null)
     const { isAirgapped } = useMainContext()
 
+    const handleClearTimeout = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current)
+        }
+        abortControllerRef.current.abort()
+    }
+
     const checkConnectivity = async () => {
         if (isAirgapped) return
-        // Cancel any pending request
-        if (abortControllerRef.current) {
-            abortControllerRef.current.abort()
-        }
 
+        handleClearTimeout()
         const controller = new AbortController()
         abortControllerRef.current = controller
 
@@ -39,10 +43,7 @@ export const useOnline = ({ onOnline = noop }: { onOnline?: () => void }) => {
         }
     }
     const handleOffline = () => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current)
-        }
-        abortControllerRef.current.abort()
+        handleClearTimeout()
         setOnline(false)
     }
 
@@ -51,6 +52,11 @@ export const useOnline = ({ onOnline = noop }: { onOnline?: () => void }) => {
         await checkConnectivity()
     }
 
+    useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        handleOnline()
+    }, [])
+
     useEffect(() => {
         if (isAirgapped) return null
         window.addEventListener('online', handleOnline)

src/services/service.ts

@@ -559,6 +559,10 @@ export const getTemplateOptions = (appId: number, envId: number): Promise<Respon
     get(getUrlWithSearchParams(Routes.DEPLOYMENT_OPTIONS, { appId, envId }))
 
 export const getInternetConnectivity = (controller: AbortController): Promise<any> => {
+    setTimeout(() => {
+        controller.abort()
+    }, 10000)
+
     return fetch(`${window._env_?.CENTRAL_API_ENDPOINT ?? 'https://api.devtron.ai'}/${Routes.HEALTH}`, {
         signal: controller.signal,
     }).then((res) => res.json())