fix: show skeleton when fetch image (#118)

* fix: show skeleton when fetch image * chore: resolve Webpack`s AutoPublicPathRuntimeModule has a DOM Clobbering Gadget that leads to XSS
mash-up-kr · Sep 2, 2024 · 18773d5 · 18773d5
1 parent 8f007ec
commit 18773d5
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/common/proxy-image.tsx b/src/components/common/proxy-image.tsx
@@ -12,16 +12,20 @@ interface ProxyImageProps extends ImgHTMLAttributes<HTMLImageElement> {
 
 const ProxyImage = ({ src, ...props }: ProxyImageProps) => {
   const [url, setUrl] = useState('')
+  const [isFetch, setIsFetch] = useState(false)
   const { ref, inView, isLoading } = useLazyImage({ src: url, options: {} })
 
   useEffect(() => {
     const convertImage = async () => {
       try {
+        setIsFetch(true)
         const response = await api.proxy.get(src)
         const blob = await response.blob()
         const objectURL = URL.createObjectURL(blob)
         setUrl(objectURL)
-      } catch {}
+      } finally {
+        setIsFetch(false)
+      }
     }
 
     if (!url && inView && src.startsWith('http')) {
@@ -36,7 +40,7 @@ const ProxyImage = ({ src, ...props }: ProxyImageProps) => {
     }
   }, [inView, src, url])
 
-  if (isLoading) {
+  if (isLoading || isFetch) {
     return (
       <div className={cn('animate-pulse', props.className)}>
         <div