https://getatoz.com/assets/LazyOnView.CKv5M5Ja.js

1import { importShared } from './__federation_fn_import._gQOYU1h.js';
2import { j as jsxRuntimeExports } from './index.D0TJ7u1W.js';
3
4const React = await importShared('react');
5const {useEffect,useRef,useState,memo} = React;
6
7function LazyOnView({ children, height = 350 }) {
8  const containerRef = useRef(null);
9  const [visible, setVisible] = useState(false);
10  useEffect(() => {
11    const node = containerRef.current;
12    if (!node) return;
13    const observer = new IntersectionObserver(
14      ([entry]) => {
15        if (entry.isIntersecting) {
16          setVisible(true);
17          observer.unobserve(node);
18        }
19      },
20      {
21        rootMargin: "200px"
22      }
23    );
24    observer.observe(node);
25    return () => observer.disconnect();
26  }, []);
27  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: containerRef, children: visible ? children : /* @__PURE__ */ jsxRuntimeExports.jsx(
28    "div",
29    {
30      style: { height },
31      className: "animate-pulse bg-gray-100 rounded-md"
32    }
33  ) });
34}
35const LazyOnView$1 = memo(LazyOnView);
36

37export { LazyOnView$1 as L };