import { useLayoutEffect } from 'react' ; let isSupported = - 1 ; let elements ; let intersectionObservers ; let resizeObservers ; function eqIsh ( a , b , fuzz = 1 ) { return Math . abs ( a - b ) <= fuzz ; } function rectNotEQ ( a , b , fuzz = 2 ) { return ! eqIsh ( a . width , b . width , fuzz ) || ! eqIsh ( a . height , b . height , fuzz ) ; } function reserveSpace ( el , rect ) { const old = elements . get ( el ) ; if ( ! old || rectNotEQ ( old , rect ) ) { elements . set ( el , rect ) ; ( el as HTMLElement ) . style . containIntrinsicSize = `${ rect . width }px ${ rect . height }px` ; } } function init ( ) { elements = new WeakMap ( ) ; intersectionObservers = new IntersectionObserver ( ( entries ) => { entries . forEach ( ( entry ) => { if ( entry . intersectionRatio > 0 ) { reserveSpace ( entry . target , entry . boundingClientRect ) ; } } ) ; } , { rootMargin : '50px 0px 100px 0px' } ) ; resizeObservers = new ResizeObserver ( ( entries ) => { entries . forEach ( ( entry ) => { if ( entry . contentRect . height ) { reserveSpace ( entry . target , entry . contentRect ) ; } } ) ; } ) ; } export function useContentVisibility ( ref ) { useLayoutEffect ( ( ) => { if ( isSupported === - 1 ) { if ( 'CSS' in global && CSS . supports ( 'content-visibility' , 'auto' ) ) { isSupported = 1 ; init ( ) ; } else { isSupported = 0 ; } } if ( isSupported < 1 ) { return ; } const el = ref . current ; if ( el !== null ) { intersectionObservers . observe ( el ) ; resizeObservers . observe ( el ) ; return ( ) => { intersectionObservers . unobserve ( el ) ; resizeObservers . unobserve ( el ) ; } ; } } , [ ref ] ) ; }