- Add 'use client' directive to GlobalBackground component - Fix SSR-unsafe document access in usePageVisibility hook - Fix memory leak in useIntersectionObserver cleanup function Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
26 lines
687 B
TypeScript
26 lines
687 B
TypeScript
import { useState, useEffect } from 'react';
|
|
|
|
/**
|
|
* Hook to detect tab visibility using the Page Visibility API
|
|
* @returns boolean - true when page is visible, false when hidden
|
|
*/
|
|
export const usePageVisibility = (): boolean => {
|
|
const [isVisible, setIsVisible] = useState<boolean>(() =>
|
|
typeof document !== 'undefined' ? !document.hidden : true
|
|
);
|
|
|
|
useEffect(() => {
|
|
const handleVisibilityChange = () => {
|
|
setIsVisible(!document.hidden);
|
|
};
|
|
|
|
document.addEventListener('visibilitychange', handleVisibilityChange);
|
|
|
|
return () => {
|
|
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
|
};
|
|
}, []);
|
|
|
|
return isVisible;
|
|
};
|