Pause MetricsBar's auto-refresh interval when the browser tab is hidden

[Jagadeeshftw]

📌 Description

MetricsBar (src/components/MetricsBar.tsx) auto-refreshes via useInterval (src/hooks/useInterval.ts) per the README's "live metrics bar (auto-refreshing)" description. It keeps polling fetchMetrics (src/lib/metricsApi.ts) even when the browser tab is hidden/backgrounded, wasting requests against the backend's rate-limited API for a view nobody is looking at.

🧩 Requirements and context

• Pause the interval when document.visibilityState === "hidden" and resume it (with an immediate refresh) when the tab becomes visible again.
• No change to useInterval's generic public API — implement the visibility gating in MetricsBar or as an opt-in enhancement to the hook.
• Preserve existing cleanup-on-unmount behavior.

🛠️ Suggested execution

• Add a visibilitychange listener in MetricsBar.tsx (or useInterval.ts) that stops/restarts the interval accordingly.
• Extend src/hooks/useInterval.test.ts and/or src/components/MetricsBar.test.tsx with a visibility-toggle test using a mocked document.visibilityState.
• Verify no duplicate fetches fire immediately on resume if a fetch was already in flight when the tab was hidden.

✅ Acceptance criteria

• Polling stops while the tab is hidden.
• Polling resumes (with a fresh fetch) when the tab becomes visible again.
• Test coverage for both transitions.

🔒 Security notes

No new attack surface; reduces unnecessary load against the rate-limited backend API.

📋 Guidelines

• Minimum 95% test coverage
• Clear documentation
• Timeframe: 96 hours

[devfoma]

Hello, I would love to take on this issue. I'm a software engineer with over 4 years experience. and i'm confident I can resolve this issue

[grantfox-oss]

🦊 GrantFox — @devfoma has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #66)
2. Your PR will be reviewed by the AnchorNet-Org maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🦊 GrantFox — @devfoma has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #66)
2. Your PR will be reviewed by the AnchorNet-Org maintainers

Good luck! Track your progress on GrantFox.