Page Visibility API#
The Page Visibility API is a browser-native API that exposes document.hidden and fires a visibilitychange event when the user switches tabs, minimizes the window, or otherwise hides the page. Blinko uses it in one place to avoid unnecessary network calls when the tab is not active.
Current Usage#
DefaultModelsSection β refresh AI models on tab return
The only production use of the Page Visibility API is in DefaultModelsSection.tsx. When the component mounts it registers a visibilitychange listener; when the page becomes visible again (!document.hidden), it re-fetches the full model list via aiSettingStore.allModels.call() . The listener is removed on unmount via the useEffect cleanup function .
The rationale, noted in the source comment, is that the user may have opened another tab to create or configure models, and returning to the Settings page should immediately reflect those changes .
Related Polling (without visibility gating)#
Two other components run setInterval-based polling but do not currently gate on page visibility:
-
EmbeddingSettingsSectionβ pollsapi.ai.rebuildEmbeddingProgressevery 2 seconds while a rebuild is in progress, viastartPolling/stopPollinghelpers controlled bypollingIntervalRef. The interval is stopped only when the rebuild task reportsisRunning: falseor the component unmounts . Page visibility is not checked. -
TaskSettingβ pollsblinko.task.call()every 1 second whilepolling === trueto refresh task status after toggling a background job . This is short-lived by design (polling starts/stops around a single toggle action), but the interval is also not paused when the tab is hidden.
Gaps / Extension Opportunities#
Neither EmbeddingSettingsSection nor TaskSetting pauses its setInterval when the tab is hidden. To extend the existing pattern from DefaultModelsSection, the recommended approach is:
- Track an
isPageVisibleref/state initialized from!document.hidden. - In the
visibilitychangehandler: resume the interval when the page becomes visible, clear it when hidden. - Wire cleanup in the
useEffectreturn.
There is no shared useVisibilityAwareInterval hook in app/src/lib/hooks.ts; adding one would allow consistent visibility-aware polling across components.