diff --git a/packages/hoppscotch-app/helpers/utils/composables.ts b/packages/hoppscotch-app/helpers/utils/composables.ts index 5f6baec59..2018e74a6 100644 --- a/packages/hoppscotch-app/helpers/utils/composables.ts +++ b/packages/hoppscotch-app/helpers/utils/composables.ts @@ -164,16 +164,29 @@ export function useColorMode() { export function usePolled( pollDurationMS: number, - pollFunc: () => T + pollFunc: (stopPolling: () => void) => T ): Ref { - const result = shallowRef(pollFunc()) + let polling = true + let handle: ReturnType | 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 diff --git a/packages/hoppscotch-app/layouts/default.vue b/packages/hoppscotch-app/layouts/default.vue index e7b5d0d64..ed4c31271 100644 --- a/packages/hoppscotch-app/layouts/default.vue +++ b/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") diff --git a/packages/hoppscotch-app/pages/settings.vue b/packages/hoppscotch-app/pages/settings.vue index 09f26e704..623f1d458 100644 --- a/packages/hoppscotch-app/pages/settings.vue +++ b/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")