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() 1. The listener is removed on unmount via the useEffect cleanup function 2.

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 3.

Related Polling (without visibility gating)#

Two other components run setInterval-based polling but do not currently gate on page visibility:

• EmbeddingSettingsSection — polls api.ai.rebuildEmbeddingProgress every 2 seconds while a rebuild is in progress, via startPolling / stopPolling helpers controlled by pollingIntervalRef 4. The interval is stopped only when the rebuild task reports isRunning: false or the component unmounts 5. Page visibility is not checked.

• TaskSetting — polls blinko.task.call() every 1 second while polling === true to refresh task status after toggling a background job 6. 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:

1. Track an isPageVisible ref/state initialized from !document.hidden.
2. In the visibilitychange handler: resume the interval when the page becomes visible, clear it when hidden.
3. Wire cleanup in the useEffect return.

There is no shared useVisibilityAwareInterval hook in app/src/lib/hooks.ts; adding one would allow consistent visibility-aware polling across components.