{"version":3,"file":"88477b63.js","sources":["../../../src/hooks/useIntersectionObserver.ts","../../../src/components/base/lazy-loader/LazyLoader.client.tsx"],"sourcesContent":["/**\n *\n * @param {Object} elRef ref object for el\n * @param {Object} options intersection object\n */\nimport {useState, useEffect} from 'react';\nimport type {OberserverOptionProps} from 'Js/@types/sdg';\n\nexport default function useIntersectionObserver(\n  options: OberserverOptionProps = {\n    root: null,\n    rootMargin: '0px',\n    threshold: 1.0,\n  },\n  ratioCheck: number,\n  containerRef: React.MutableRefObject<null>,\n) {\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n\n  useEffect(() => {\n    if (isVisible) return; // Return if element is already been transitioned in\n    const container = containerRef?.current;\n\n    const callbackFunc = (\n      entries: IntersectionObserverEntry[],\n      observer: IntersectionObserver,\n    ): void => {\n      const [entry] = entries;\n      const isIntersecting =\n        entry.isIntersecting &&\n        entry.intersectionRatio >= (ratioCheck || options.threshold);\n      setIsVisible(isIntersecting);\n\n      if (isIntersecting && observer) observer.disconnect();\n    };\n\n    const containerObserver = new IntersectionObserver(callbackFunc, options);\n    if (container && containerObserver) containerObserver.observe(container);\n\n    return () => {\n      if (container && containerObserver)\n        containerObserver.unobserve(container);\n    };\n  }, [containerRef, options, isVisible, ratioCheck]);\n\n  return [isVisible];\n}\n","import {ReactNode, useRef} from 'react';\nimport useIntersectionObserver from 'Js/hooks/useIntersectionObserver';\n\ntype Props = {\n  children: ReactNode;\n  fallback?: JSX.Element | null | undefined;\n};\n\nexport default function LazyLoader({children, fallback}: Props) {\n  const wrapperRef = useRef(null);\n  const observerOpts = {\n    root: null,\n    rootMargin: '0px',\n    threshold: 0.1,\n  };\n  const ratio = 0.1;\n\n  const [isVisible] = useIntersectionObserver(observerOpts, ratio, wrapperRef);\n\n  return (\n    <>\n      {!isVisible && (\n        <div className=\"relative\">\n          <span ref={wrapperRef} className=\"absolute -top-8\" />\n        </div>\n      )}\n      {isVisible ? children : fallback}\n    </>\n  );\n}\n"],"names":["useIntersectionObserver","options","ratioCheck","containerRef","isVisible","setIsVisible","useState","useEffect","container","callbackFunc","entries","observer","entry","isIntersecting","containerObserver","LazyLoader","children","fallback","wrapperRef","useRef","observerOpts","root","rootMargin","threshold","ratio","_Fragment"],"mappings":"6DAQA,SAAwBA,EACtBC,EAAiC,CAC/B,KAAM,KACN,WAAY,MACZ,UAAW,CACb,EACAC,EACAC,EACA,CACA,KAAM,CAACC,EAAWC,CAAY,EAAIC,mBAAkB,EAAK,EAEzDC,OAAAA,EAAAA,QAAAA,UAAU,IAAM,CACV,GAAAH,EAAW,OACf,MAAMI,EAAYL,GAAA,YAAAA,EAAc,QAE1BM,EAAe,CACnBC,EACAC,IACS,CACH,KAAA,CAACC,CAAK,EAAIF,EACVG,EACJD,EAAM,gBACNA,EAAM,oBAAsBV,GAAcD,EAAQ,WACpDI,EAAaQ,CAAc,EAEvBA,GAAkBF,GAAUA,EAAS,WAAW,CAAA,EAGhDG,EAAoB,IAAI,qBAAqBL,EAAcR,CAAO,EACxE,OAAIO,GAAaM,GAAmBA,EAAkB,QAAQN,CAAS,EAEhE,IAAM,CACPA,GAAaM,GACfA,EAAkB,UAAUN,CAAS,CAAA,GAExC,CAACL,EAAcF,EAASG,EAAWF,CAAU,CAAC,EAE1C,CAACE,CAAS,CACnB,CCtCA,SAAwBW,EAAW,CAACC,SAAAA,EAAUC,SAAAA,CAAe,EAAG,CACxDC,MAAAA,EAAaC,iBAAO,IAAI,EACxBC,EAAe,CACnBC,KAAM,KACNC,WAAY,MACZC,UAAW,EAAA,EAEPC,EAAQ,GAER,CAACpB,CAAS,EAAIJ,EAAwBoB,EAAcI,EAAON,CAAU,EAE3E,SACEO,EAAA,CAAA,SACG,CAAA,CAACrB,KACA,MAAA,CAAK,UAAU,WAAU,WACvB,OAAA,CAAM,IAAKc,EAAY,UAAU,iBAAA,CAAiB,CAAA,CAAG,EAGxDd,EAAYY,EAAWC,CAAQ,CAAA,CAC/B,CAEP"}