IntersectionObserver — Lost Sentinel Breaks Infinite Scroll

// Lazy load images as they scroll into view
const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;  // load the real image
            img.classList.add('loaded');
            observer.unobserve(img);    // stop watching once loaded
        }
    });
}, {
    rootMargin: '200px',  // start loading 200px before entering viewport
    threshold: 0          // fire as soon as any part is visible
});

// Observe all images with data-src attribute
document.querySelectorAll('img[data-src]').forEach(img => {
    imageObserver.observe(img);
});

// HTML:
// <img data-src="/images/photo.jpg" src="/images/placeholder.jpg" />

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        console.log(`${entry.target.id}: ${entry.intersectionRatio.toFixed(2)} visible`);
        console.log('isIntersecting:', entry.isIntersecting);
    });
}, {
    root: null,          // null = viewport (default)
    rootMargin: '0px',   // expand/contract the root's bounding box
    threshold: [0, 0.25, 0.5, 0.75, 1.0]  // fire callback at each threshold
    // threshold: 0.5 fires when element is 50% visible
});

// Scroll animation — add class when element enters viewport
const animationObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        entry.target.classList.toggle('visible', entry.isIntersecting);
    });
}, { threshold: 0.1 });  // fire when 10% visible

document.querySelectorAll('.animate-on-scroll').forEach(el => {
    animationObserver.observe(el);
});

// Observe a sentinel element at the bottom of the list
const sentinel = document.querySelector('#load-more-sentinel');
let page = 1;
let isLoading = false;

const scrollObserver = new IntersectionObserver(async (entries) => {
    const [entry] = entries;
    if (!entry.isIntersecting || isLoading) return;

    isLoading = true;
    page++;

    try {
        const response = await fetch(`/api/items?page=${page}`);
        const items = await response.json();

        if (items.length === 0) {
            scrollObserver.unobserve(sentinel);  // no more pages
            sentinel.remove();
            return;
        }

        items.forEach(item => renderItem(item));
    } finally {
        isLoading = false;
    }
}, { rootMargin: '300px' });  // load before hitting the bottom

scrollObserver.observe(sentinel);

function renderItem(item) {
    const el = document.createElement('div');
    el.textContent = item.title;
    document.querySelector('#list').appendChild(el);
}

// Good: one observer for all targets
const observer = new IntersectionObserver((entries) => {
    // handle entries
}, { threshold: 0 });

document.querySelectorAll('.observe-me').forEach(el => observer.observe(el));

// Cleanup on navigation/component unmount
function cleanup() {
    observer.disconnect();
}

// In React:
useEffect(() => {
    return () => observer.disconnect();  // cleanup on unmount
}, []);

// React custom hook for intersection observer
function useIntersectionObserver(ref, options = {}) {
    const [isIntersecting, setIsIntersecting] = useState(false);

    useEffect(() => {
        if (!ref.current) return;

        const observer = new IntersectionObserver(([entry]) => {
            setIsIntersecting(entry.isIntersecting);
        }, options);

        observer.observe(ref.current);

        return () => observer.disconnect();
    }, [ref, options]);

    return isIntersecting;
}

// Usage:
function LazyImage({ src, placeholder }) {
    const imgRef = useRef();
    const isVisible = useIntersectionObserver(imgRef, { rootMargin: '100px' });

    return (
        <img
            ref={imgRef}
            src={isVisible ? src : placeholder}
            alt=""
            loading="lazy"
        />
    );
}