Untitled

import React, { useEffect, useRef, useState } from "react";
import PdfPageWithNotes from "./components/PdfPageWithNotes";

export default function LazyPageWithNotes({
  pageNumber,
  containerWidth,
  ebookId,
  scale = 1,
  onPageClick
}) {
  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);
    };
  }, []);

  return (
    <div ref={ref}>
      {inView && (
        <PdfPageWithNotes
          pageNumber={pageNumber}
          containerWidth={containerWidth}
          ebookId={ebookId}
          scale={scale}
          onPageClick={onPageClick}
        />
      )}
    </div>
  );
}