Nextjs component handling the visibility detection using the Intersection Observer js web standard API. This cuold help reduce the initial amount of bytes sent thru the first glance to the browser.

LazyLoad.jsx

'use client';
import { useEffect, useRef, useState } from 'react';

export const LazyLoad = ({ children }) => {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { rootMargin: '100px' } //the root margin
    );

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => {
      if (ref.current) {
        observer.unobserve(ref.current);
      }
    };
  }, []);

  return <div
  className='min-h-screen w-full flex flex-col items-center justify-center'
    ref={ref}>{isVisible ? children : null}</div>;
};

export default LazyLoad;