Lazy Loading Feature about react-pageflip HOT 2 OPEN

import React from "react";

export default function useInView(ref: React.RefObject<HTMLDivElement>) {
  const [inView, setInView] = React.useState(false);

  React.useEffect(() => {
    if (!ref.current) return;
    const observer = new window.IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          if (inView) {
            observer.disconnect();
          }
          setInView(true);
          return;
        }
      },
      {
        root: null,
        threshold: 0.1,
      }
    );

    observer.observe(ref.current);
    return () => {
      observer.disconnect();
    };
  }, [ref]);

  return { inView };
}

interface PageBookletProps {
  title: string;
  forceImgLoad?: boolean;
  img1Url: string;
  img2Url?: string;
}

const PageBooklet = React.forwardRef((props: PageBookletProps, ref: any) => {
  const container = React.useRef<HTMLDivElement>(null);
  const { inView } = useInView(container);

  return (
    <div ref={ref}>
      <div
        ref={container}
        className="h-full w-full bg-cover bg-top bg-no-repeat flex items-center justify-center"
        style={{ backgroundImage: "url('assets/booklet-bg.JPG')" }}
      >
        <div className="h-[70%] w-full flex flex-col justify-between">
          <div className="h-[90%] flex justify-evenly">
            <div className="h-full">
              <img
                className="h-full border-8 border-slate-400"
                alt="First Image"
                src={
                  props.forceImgLoad
                    ? props.img1Url
                    : inView
                    ? props.img1Url
                    : undefined
                }
              />
            </div>
            {props.img2Url && (
              <div className="h-full">
                <img
                  className="h-full border-8 border-slate-400"
                  alt="Second Image"
                  src={inView ? props.img2Url : undefined}
                />
              </div>
            )}
          </div>
          <h1 className="font-bold uppercase text-slate-400">{props.title}</h1>
        </div>
      </div>
    </div>
  );
});

export default PageBooklet;