feat: stop extension status polling when a status is resolved

packages/hoppscotch-app/helpers/utils/composables.ts

@@ -164,16 +164,29 @@ export function useColorMode() {
 
 export function usePolled<T>(
   pollDurationMS: number,
-  pollFunc: () => T
+  pollFunc: (stopPolling: () => void) => T
 ): Ref<T> {
-  const result = shallowRef(pollFunc())
+  let polling = true
+  let handle: ReturnType<typeof setInterval> | undefined
 
-  const handle = setInterval(() => {
-    result.value = pollFunc()
-  }, pollDurationMS)
+  const stopPolling = () => {
+    if (handle) {
+      clearInterval(handle)
+      handle = undefined
+      polling = false
+    }
+  }
+
+  const result = shallowRef(pollFunc(stopPolling))
+
+  if (polling) {
+    handle = setInterval(() => {
+      result.value = pollFunc(stopPolling)
+    }, pollDurationMS)
+  }
 
   onBeforeUnmount(() => {
-    clearInterval(handle)
+    if (polling) stopPolling()
   })
 
   return result

packages/hoppscotch-app/layouts/default.vue

@@ -57,11 +57,8 @@ import { logPageView } from "~/helpers/fb/analytics"
 import { hookKeybindingsListener } from "~/helpers/keybindings"
 import { defineActionHandler } from "~/helpers/actions"
 import useWindowSize from "~/helpers/utils/useWindowSize"
-<<<<<<< HEAD
 import { useSentry } from "~/helpers/sentry"
-=======
 import { useColorMode } from "~/helpers/utils/composables"
->>>>>>> refactor: update color-mode usage to new composable
 
 function appLayout() {
   const rightSidebar = useSetting("SIDEBAR")

packages/hoppscotch-app/pages/settings.vue

@@ -249,6 +249,7 @@ import {
   hasFirefoxExtensionInstalled,
 } from "~/helpers/strategies/ExtensionStrategy"
 import { getLocalConfig } from "~/newstore/localpersistence"
+import { browserIsChrome, browserIsFirefox } from "~/helpers/utils/userAgent"
 
 const t = useI18n()
 const toast = useToast()
@@ -262,19 +263,30 @@ const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
 const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")
 const ZEN_MODE = useSetting("ZEN_MODE")
 
-const extensionVersion = usePolled(5000, () =>
-  hasExtensionInstalled()
+const extensionVersion = usePolled(5000, (stopPolling) => {
+  const result = hasExtensionInstalled()
     ? window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
     : null
-)
 
-const hasChromeExtInstalled = usePolled(5000, () =>
-  hasChromeExtensionInstalled()
-)
+  // We don't need to poll anymore after we get value
+  if (result) stopPolling()
 
-const hasFirefoxExtInstalled = usePolled(5000, () =>
-  hasFirefoxExtensionInstalled()
-)
+  return result
+})
+
+const hasChromeExtInstalled = usePolled(5000, (stopPolling) => {
+  // If not Chrome, we don't need to worry about this value changing
+  if (!browserIsChrome()) stopPolling()
+
+  return hasChromeExtensionInstalled()
+})
+
+const hasFirefoxExtInstalled = usePolled(5000, (stopPolling) => {
+  // If not Chrome, we don't need to worry about this value changing
+  if (!browserIsFirefox()) stopPolling()
+
+  return hasFirefoxExtensionInstalled()
+})
 
 const clearIcon = ref("rotate-ccw")