{"version":3,"file":"static/chunks/96580.321abb7c53750556.js","mappings":"0JAsBAA,CAAAA,EAAA,QAAeC,CAAAA,EAAAA,EAAAA,CAAAA,EAff,SAA0BC,CAEF,KAFE,CACxBC,cAAAA,CAAa,CACS,CAFED,EAGlB,CAAEE,cAAAA,CAAa,CAAEC,MAAAA,CAAK,CAAEC,QAAAA,CAAO,CAAEC,UAAAA,CAAS,CAAE,CAAGC,CAAAA,EAAAA,EAAAA,CAAAA,IAErD,MACE,GAAAC,EAAAC,GAAA,EAACC,EAAAA,CAAuBA,CAAAA,CACtBC,KAAMR,MAAAA,EAAAA,EAAiB,EAAE,CACzBG,UAAWA,GAAaM,CAAAA,CAAQV,EAChCE,MAAOA,EACPC,QAASA,GAGf,qHCLO,IAAMQ,EAA0B,eACrCC,EAAAA,UAAAA,MAAAA,CAAAA,GAAAA,KAAAA,IAAAA,SAAAA,CAAAA,EAAAA,CAAAA,SAAAA,CAAAA,EAAAA,CAAY,EAON,CAACC,EAAgBC,EAAkB,CAAGC,CAAAA,EAAAA,EAAAA,QAAAA,EAAS,IAE/C,CAACC,EAAaC,EAAe,CAAGF,CAAAA,EAAAA,EAAAA,QAAAA,EAAS,IAEzC,CAACG,EAAOC,EAAS,CAAGJ,CAAAA,EAAAA,EAAAA,QAAAA,EAAS,GAG7BK,EAAYC,CAAAA,EAAAA,EAAAA,MAAAA,EAAuB,MAEnCC,EAAYD,CAAAA,EAAAA,EAAAA,MAAAA,EAAuB,MAQnCE,EAAqBC,CAAAA,EAAAA,EAAAA,WAAAA,EACzB,IACE,IAAMC,EAAQC,CAAO,CAAC,EAAE,CAGxB,GAFAZ,EAAkBW,EAAMZ,cAAc,EAElCY,EAAMZ,cAAc,EAAI,CAACG,EAAa,CACxC,GAAIE,EAAQ,EAAG,CACbD,EAAe,IACf,MACF,CAEAE,EAASQ,GAAaA,EAAY,EACpC,CACF,EACA,CAACT,EAAOF,EAAY,EAShBY,EAAgBJ,CAAAA,EAAAA,EAAAA,WAAAA,EAAY,KAChC,IAAMK,EAAW,IAAIC,qBAAqBP,EAAoB,CAC5DX,UAAAA,EACAmB,WAAY,qBACd,GAEMC,EAAgBV,EAAUW,OAAO,CAKvC,OAJID,GACFH,EAASK,OAAO,CAACF,GAGZ,KACDA,GACFH,EAASM,SAAS,CAACH,EAEvB,CACF,EAAG,CAACpB,EAAWW,EAAmB,EAMlC,MAHAa,CAAAA,EAAAA,EAAAA,SAAAA,EAAUR,EAAe,CAAChB,EAAWgB,EAAc,EAG5C,CAACf,GAAkBG,EAAaI,EAAWE,EAAU,EC5DjDxB,EAAe,SAC1BuC,CAAAA,MACAzB,EAAAA,UAAAA,MAAAA,CAAAA,GAAAA,KAAAA,IAAAA,SAAAA,CAAAA,EAAAA,CAAAA,SAAAA,CAAAA,EAAAA,CAAY,EAEZ,OAAO,IACL,GAAM,CAAC0B,EAAUC,EAAKjB,EAAU,CAAGX,EAAwBC,GAE3D,MACE,GAAA4B,EAAAC,IAAA,EAACC,MAAAA,CAAIC,UAAWC,IAAAA,SAAgB,WAC9B,GAAAJ,EAAAjC,GAAA,EAACmC,MAAAA,CAAIC,UAAWC,IAAAA,iBAAwB,CAAEL,IAAKjB,IAC/C,GAAAkB,EAAAjC,GAAA,EAACmC,MAAAA,CAAIH,IAAKA,EAAKI,UAAWC,IAAAA,kBAAyB,UAChDN,EAAW,GAAAE,EAAAjC,GAAA,EAAC8B,EAAAA,CAAkB,GAAGQ,CAAK,GAAO,SAItD,CACF,qBCxCAC,EAAAC,OAAA,EAAkB","sources":["webpack://_N_E/./src/components/Home/V2/ProvidersSection/index.tsx","webpack://_N_E/../../packages/common/src/hooks/useIntersectionObserver/index.ts","webpack://_N_E/../../packages/common/src/hoc/WithLazyLoading/index.tsx","webpack://_N_E/../../packages/common/src/hoc/WithLazyLoading/styles.module.scss"],"sourcesContent":["import { AxiosError } from 'axios';\nimport { GenericError } from '@/models/generic-error';\nimport ProvidersSectionContent from './Providers';\nimport { useGameProviders } from '@/api/game-providers';\nimport { ProvidersSectionProps } from './props';\nimport { withLazyLoad } from '@starsoft/common/hoc';\n\nfunction ProvidersSection({\n  isFallbacking,\n}: ProvidersSectionProps): JSX.Element {\n  const { gameProviders, error, refetch, isLoading } = useGameProviders();\n\n  return (\n    <ProvidersSectionContent\n      data={gameProviders ?? []}\n      isLoading={isLoading || Boolean(isFallbacking)}\n      error={error as AxiosError<GenericError>}\n      refetch={refetch}\n    />\n  );\n}\n\nexport default withLazyLoad(ProvidersSection);\n","import { useEffect, useState, useRef, useCallback } from 'react';\n\n/**\n * Custom hook to observe the intersection of a target element with the viewport.\n * It uses the Intersection Observer API to determine if the target element is in view.\n *\n * @param {number} threshold - A number between 0 and 1 indicating the percentage of the target's visibility required to trigger the observer.\n * @returns {[boolean, React.RefObject<HTMLDivElement>, React.RefObject<HTMLDivElement>]} - Returns a tuple containing:\n *   - A boolean indicating if the target element is intersecting or has been rendered.\n *   - A ref object to attach to the target element.\n *   - A ref object to attach to a buffer element.\n *\n * Example usage:\n * const [isVisible, targetRef, bufferRef] = useIntersectionObserver(0.5);\n */\nexport const useIntersectionObserver = (\n  threshold = 0,\n): [\n  boolean,\n  React.RefObject<HTMLDivElement>,\n  React.RefObject<HTMLDivElement>,\n] => {\n  // State to track if the target element is intersecting\n  const [isIntersecting, setIsIntersecting] = useState(false);\n  // State to track if the target element has been rendered\n  const [hasRendered, setHasRendered] = useState(false);\n  // State to count the number of times the target has intersected\n  const [count, setCount] = useState(0);\n\n  // Ref to attach to the target element\n  const targetRef = useRef<HTMLDivElement>(null);\n  // Ref to attach to the buffer element\n  const bufferRef = useRef<HTMLDivElement>(null);\n\n  /**\n   * Callback function to update the intersection state.\n   * It is triggered whenever the intersection state of the target element changes.\n   *\n   * @param {IntersectionObserverEntry[]} entries - Array of intersection observer entries.\n   */\n  const updateIntersection = useCallback(\n    (entries: IntersectionObserverEntry[]) => {\n      const entry = entries[0];\n      setIsIntersecting(entry.isIntersecting);\n\n      if (entry.isIntersecting && !hasRendered) {\n        if (count > 1) {\n          setHasRendered(true);\n          return;\n        }\n\n        setCount(prevCount => prevCount + 1);\n      }\n    },\n    [count, hasRendered],\n  );\n\n  /**\n   * Callback function to handle the observation of the buffer element.\n   * Sets up the Intersection Observer and starts observing the buffer element.\n   *\n   * @returns {Function} - A cleanup function to unobserve the buffer element.\n   */\n  const handleObserve = useCallback(() => {\n    const observer = new IntersectionObserver(updateIntersection, {\n      threshold,\n      rootMargin: '100px 0px 100px 0px',\n    });\n\n    const bufferElement = bufferRef.current;\n    if (bufferElement) {\n      observer.observe(bufferElement);\n    }\n\n    return () => {\n      if (bufferElement) {\n        observer.unobserve(bufferElement);\n      }\n    };\n  }, [threshold, updateIntersection]);\n\n  // Effect to start observing the buffer element when the component mounts and clean up when it unmounts\n  useEffect(handleObserve, [threshold, handleObserve]);\n\n  // Return the intersection state and refs for the target and buffer elements\n  return [isIntersecting || hasRendered, targetRef, bufferRef];\n};\n","/* eslint-disable react/display-name */\nimport React, { ComponentType } from 'react';\nimport styles from './styles.module.scss';\nimport { useIntersectionObserver } from '@starsoft/common/hooks';\n\n/**\n * Higher-Order Component (HOC) for lazy loading a component based on its visibility in the viewport.\n *\n * @template T - Type of the props that the wrapped component accepts.\n * @param {ComponentType<T>} WrappedComponent - The component to be lazy-loaded.\n * @param {number} [threshold=0] - The threshold for the intersection observer. Default is 0.\n * @returns {React.FC<T>} A functional component that wraps the given component and lazy loads it.\n *\n * @example\n * // Usage example:\n * const LazyLoadedComponent = withLazyLoad(MyComponent, 0.5);\n *\n * function App() {\n *   return (\n *     <div>\n *       <LazyLoadedComponent prop1=\"value1\" prop2=\"value2\" />\n *     </div>\n *   );\n * }\n */\nexport const withLazyLoad = <T extends object>(\n  WrappedComponent: ComponentType<T>,\n  threshold = 0,\n): React.FC<T> => {\n  return (props: T) => {\n    const [isInView, ref, bufferRef] = useIntersectionObserver(threshold);\n\n    return (\n      <div className={styles.container}>\n        <div className={styles.container__buffer} ref={bufferRef} />\n        <div ref={ref} className={styles.container__content}>\n          {isInView ? <WrappedComponent {...props} /> : null}\n        </div>\n      </div>\n    );\n  };\n};\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"container\":\"styles_container__be7Ct\",\"container__buffer\":\"styles_container__buffer__rTJDn\",\"container__content\":\"styles_container__content__NI31r\",\"skeleton-animation\":\"styles_skeleton-animation__brPd7\"};"],"names":["__webpack_exports__","withLazyLoad","param","isFallbacking","gameProviders","error","refetch","isLoading","useGameProviders","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__","jsx","ProvidersSectionContent","data","Boolean","useIntersectionObserver","threshold","isIntersecting","setIsIntersecting","useState","hasRendered","setHasRendered","count","setCount","targetRef","useRef","bufferRef","updateIntersection","useCallback","entry","entries","prevCount","handleObserve","observer","IntersectionObserver","rootMargin","bufferElement","current","observe","unobserve","useEffect","WrappedComponent","isInView","ref","jsx_runtime","jsxs","div","className","styles","props","module","exports"],"sourceRoot":""}