{"ast":null,"code":"var __jsx = React.createElement;\nimport React, { useLayoutEffect, useState } from 'react';\nimport GridLoader from 'react-spinners/GridLoader';\nimport { blobFetcher } from '~/utils/fetch';\nimport { primaryColor } from '~/utils/style';\nimport useRequest from '~/hooks/useRequest';\nimport { useTranslation } from '~/utils/i18n';\n\nconst Image = ({\n  src,\n  cache\n}) => {\n  const {\n    t\n  } = useTranslation('common');\n  const {\n    0: url,\n    1: setUrl\n  } = useState('');\n  const {\n    data,\n    error,\n    loading\n  } = useRequest(src !== null && src !== void 0 ? src : null, blobFetcher, {\n    dedupingInterval: cache !== null && cache !== void 0 ? cache : 2000\n  }); // use useLayoutEffect hook to prevent image render after url revoked\n\n  useLayoutEffect(() => {\n    if (false && data) {\n      let objectUrl = null;\n      objectUrl = URL.createObjectURL(data);\n      setUrl(objectUrl);\n      return () => {\n        objectUrl && URL.revokeObjectURL(objectUrl);\n      };\n    }\n  }, [data]);\n\n  if (loading) {\n    return __jsx(GridLoader, {\n      color: primaryColor,\n      size: \"10px\"\n    });\n  }\n\n  if (error) {\n    return __jsx(\"div\", null, t('error'));\n  }\n\n  return __jsx(\"img\", {\n    src: url\n  });\n};\n\nexport default Image;","map":null,"metadata":{},"sourceType":"module"}