{"version":3,"file":"2677.chunk.cd3421fa9939e86f5770.js","mappings":"kJAEO,MCUMA,EAAqDC,IAC9D,MAAM,sBAAEC,EAAqB,kBAAEC,EAAiB,eAAEC,GAAmBH,GAC9DI,EAAWC,GAAgBC,EAAAA,SAAqD,MDZ3DC,MCwB5B,ODxB4BA,ECcZ,KAGZC,YAAWC,UACP,MAAMC,QAAwBT,IAE9BI,GAAa,IAAMK,GAAgB,GACpCC,KAA+C,GDpBtDC,EAAAA,EAAAA,YAAU,KACN,GAA4B,aAAxBC,SAASC,WAGT,YAFAP,IAKJ,MAAMQ,EAA0BA,KACA,aAAxBF,SAASC,YACTP,GACJ,EAKJ,OAFAM,SAASG,iBAAiB,mBAAoBD,GAEvC,KACHF,SAASI,oBAAoB,mBAAoBF,EAAwB,CAC5E,GACF,ICKEX,EAIEE,EAAAA,cAACF,EAAcD,GAHXD,CAG6B,C","sources":["webpack://Kristiania.Web/./Features/Utils/Hooks/useOnPageLoaded.ts","webpack://Kristiania.Web/./Features/Utils/Lazy/LazyComponent.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nexport const useOnPageLoaded = (callback: () => void) => {\n    useEffect(() => {\n        if (document.readyState === 'complete') {\n            callback();\n\n            return;\n        }\n\n        const readyStateChangeHandler = () => {\n            if (document.readyState === 'complete') {\n                callback();\n            }\n        };\n\n        document.addEventListener('readystatechange', readyStateChangeHandler);\n\n        return () => {\n            document.removeEventListener('readystatechange', readyStateChangeHandler);\n        };\n    }, []);\n};\n","import * as React from 'react';\nimport { useOnPageLoaded } from '~/Utils/Hooks/useOnPageLoaded';\n\nconst timeToInteractiveThreshold = 5000;\nconst ensureCoefficient = 1.5; // Purely heuristic value\n\ninterface LazyComponentProps<TComponentPropsType> {\n    importComponentMethod: () => Promise<React.FC<TComponentPropsType>>;\n    componentProps: TComponentPropsType;\n    fallbackComponent?: React.ReactNode;\n}\n\nexport const LazyComponent = <TComponentPropsType extends object>(props: LazyComponentProps<TComponentPropsType>) => {\n    const { importComponentMethod, fallbackComponent, componentProps } = props;\n    const [Component, setComponent] = React.useState<React.FC<TComponentPropsType> | null>(null);\n\n    useOnPageLoaded(() => {\n        // We delay the loading of a component to ensure that the page is already interactive.\n        // This is to prevent a component from blocking the rendering of the page and increasing TBT metric.\n        setTimeout(async () => {\n            const loadedComponent = await importComponentMethod();\n            // React executes the function passed to setState, so we cannot store the component directly.\n            setComponent(() => loadedComponent);\n        }, timeToInteractiveThreshold * ensureCoefficient);\n    });\n\n    if (!Component) {\n        return fallbackComponent;\n    }\n\n    return <Component {...componentProps} />;\n};\n"],"names":["LazyComponent","props","importComponentMethod","fallbackComponent","componentProps","Component","setComponent","React","callback","setTimeout","async","loadedComponent","timeToInteractiveThreshold","useEffect","document","readyState","readyStateChangeHandler","addEventListener","removeEventListener"],"sourceRoot":""}