diff --git a/src/components/Debug/SnapshotStatus.tsx b/src/components/Debug/SnapshotStatus.tsx
index d0fe71ccd..0cbdb2b91 100644
--- a/src/components/Debug/SnapshotStatus.tsx
+++ b/src/components/Debug/SnapshotStatus.tsx
@@ -1,18 +1,62 @@
+import { useEffect, useState } from 'react'
+
 import classNames from 'classnames'
 
+import { Governance } from '../../clients/Governance'
+import { ServiceHealth, SnapshotStatus as SnapshotServiceStatus } from '../../clients/SnapshotTypes'
+import { SNAPSHOT_STATUS_ENABLED } from '../../constants'
 import useFormatMessage from '../../hooks/useFormatMessage'
-import useSnapshotStatus from '../../hooks/useSnapshotStatus'
 import Markdown from '../Common/Typography/Markdown'
 import WarningTriangle from '../Icon/WarningTriangle'
 
 import './SnapshotStatus.css'
 
+const PING_INTERVAL_IN_MS = 30000 // 30 seconds
+
+function logIfNotNormal(status: SnapshotServiceStatus) {
+  if (status.scoresStatus.health !== ServiceHealth.Normal || status.graphQlStatus.health !== ServiceHealth.Normal) {
+    console.log('Snapshot Status', status)
+  }
+}
+
 export default function SnapshotStatus() {
   const t = useFormatMessage()
-  const showSnapshotStatus = useSnapshotStatus()
+  const [showTopBar, setShowTopBar] = useState(false)
+  const [ping, setPing] = useState(false)
+
+  const updateServiceStatus = async () => {
+    const status = await Governance.get().getSnapshotStatus()
+    logIfNotNormal(status)
+    const show = status.scoresStatus.health === ServiceHealth.Failing && SNAPSHOT_STATUS_ENABLED
+    setShowTopBar(show)
+  }
+
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      const handleVisibilityChange = () => {
+        setPing(!document.hidden)
+      }
+
+      document.addEventListener('visibilitychange', handleVisibilityChange)
+
+      return () => {
+        document.removeEventListener('visibilitychange', handleVisibilityChange)
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (ping) {
+        updateServiceStatus()
+      }
+    }, PING_INTERVAL_IN_MS)
+
+    return () => clearInterval(intervalId)
+  }, [ping])
 
   return (
-    <div className={classNames(`SnapshotStatus__TopBar`, showSnapshotStatus && 'SnapshotStatus__TopBar--visible')}>
+    <div className={classNames(`SnapshotStatus__TopBar`, showTopBar && 'SnapshotStatus__TopBar--visible')}>
       <WarningTriangle size="18" />
       <Markdown size="sm" componentsClassNames={{ p: 'SnapshotStatus__Text', strong: 'SnapshotStatus__Text' }}>
         {t('page.debug.snapshot_status.label')}
diff --git a/src/hooks/useSnapshotStatus.ts b/src/hooks/useSnapshotStatus.ts
deleted file mode 100644
index 403e10577..000000000
--- a/src/hooks/useSnapshotStatus.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-
-import { Governance } from '../clients/Governance'
-import { ServiceHealth, SnapshotStatus } from '../clients/SnapshotTypes'
-import { SNAPSHOT_STATUS_ENABLED } from '../constants'
-
-const PING_INTERVAL_IN_MS = 30000 // 30 seconds
-
-function logIfNotNormal(status: SnapshotStatus) {
-  if (status.scoresStatus.health !== ServiceHealth.Normal || status.graphQlStatus.health !== ServiceHealth.Normal) {
-    console.log('Snapshot Status', status)
-  }
-}
-
-export default function useSnapshotStatus() {
-  const { data: showSnapshotStatus } = useQuery({
-    queryKey: [`snapshotStatus`],
-    queryFn: async () => {
-      const status = await Governance.get().getSnapshotStatus()
-      logIfNotNormal(status)
-      return status.scoresStatus.health === ServiceHealth.Failing && SNAPSHOT_STATUS_ENABLED
-    },
-    refetchInterval: PING_INTERVAL_IN_MS,
-  })
-
-  return showSnapshotStatus
-}