{"version":3,"file":"static/js/93180.4bbe0b19.chunk.js","mappings":"oLAiBO,MAAMA,EAAUC,IAMK,IANJ,KACtBC,EAAI,UACJC,EAAY,GAAE,YACdC,EAAW,aACXC,EAAY,MACZC,EAAQ,2BACFL,EAKN,OAJAM,EAAAA,EAAAA,kBAAgB,IAAkB,OAAZF,QAAY,IAAZA,OAAY,EAAZA,KAAkB,KAExCG,EAAAA,EAAAA,YAAU,IAAM,IAAiB,OAAXJ,QAAW,IAAXA,OAAW,EAAXA,KAAiB,KAGrCK,EAAAA,EAAAA,KAAA,OAAKN,UAAW,sBAAsBA,IAAYO,UAChDD,EAAAA,EAAAA,KAACE,EAAAA,EAAU,CACTC,IAAI,UACJC,KAAK,OACLC,MAAM,UACNZ,KAAMA,GAAQa,EAAAA,GAAUC,IACxBV,MAAOA,KAEL,C","sources":["components/Loading/index.tsx"],"sourcesContent":["import { ReactElement, useEffect, useLayoutEffect } from 'react';\nimport { EIconSize } from 'utils/constants/app/ui';\nimport { GlobalIcon } from 'components/GlobalIcon';\nimport './index.less';\n\n/**\n * @prop onAfterLoad: You can use this event with lazy component to track loading state.\n * @prop onBeforeLoad: This is to capture loading end state\n */\ntype Props = {\n  size?: EIconSize._16 | EIconSize._24 | EIconSize._32 | EIconSize._48;\n  className?: string;\n  onAfterLoad?: () => void;\n  onBeforeLoad?: () => void;\n  color?: string;\n};\n\nexport const Loading = ({\n  size,\n  className = '',\n  onAfterLoad,\n  onBeforeLoad,\n  color = 'var(--v3-primary-color)'\n}: Props): ReactElement => {\n  useLayoutEffect(() => onBeforeLoad?.(), []);\n\n  useEffect(() => () => onAfterLoad?.(), []);\n\n  return (\n    <div className={`loading__container ${className}`}>\n      <GlobalIcon\n        lib=\"generic\"\n        name=\"spin\"\n        theme=\"default\"\n        size={size || EIconSize._32}\n        color={color}\n      />\n    </div>\n  );\n};\n"],"names":["Loading","_ref","size","className","onAfterLoad","onBeforeLoad","color","useLayoutEffect","useEffect","_jsx","children","GlobalIcon","lib","name","theme","EIconSize","_32"],"sourceRoot":""}