{"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\nvar Image = function Image(_ref) {\n  var src = _ref.src,\n      cache = _ref.cache;\n\n  var _useTranslation = useTranslation('common'),\n      t = _useTranslation.t;\n\n  var _useState = useState(''),\n      url = _useState[0],\n      setUrl = _useState[1];\n\n  var _useRequest = useRequest(src !== null && src !== void 0 ? src : null, blobFetcher, {\n    dedupingInterval: cache !== null && cache !== void 0 ? cache : 2000\n  }),\n      data = _useRequest.data,\n      error = _useRequest.error,\n      loading = _useRequest.loading; // use useLayoutEffect hook to prevent image render after url revoked\n\n\n  useLayoutEffect(function () {\n    if (true && data) {\n      var objectUrl = null;\n      objectUrl = URL.createObjectURL(data);\n      setUrl(objectUrl);\n      return function () {\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"}