Untitled

const LazyPage = ({ pageNumber, containerWidth }) => {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setInView(true);
        observer.unobserve(ref.current);
      }
    });
    if (ref.current) observer.observe(ref.current);

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

  // Ensure a minimum width so the PDF renders correctly
  const pageWidth = Math.max(containerWidth * 0.9, 600);

  return (
    <div ref={ref} className="mb-6 w-full flex justify-center">
      {inView && (
        <Page
          pageNumber={pageNumber}
          renderTextLayer={false}
          width={pageWidth}
          className="bg-white shadow-md rounded"
        />
      )}
    </div>
  );
};