From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 7 Aug 2022 14:44:47 +0000 (+0530)
Subject: Fix blurhash visible under transparent img (#721)
X-Git-Tag: v2.1.1~1
X-Git-Url: https://git.wafflesoft.org/?a=commitdiff_plain;h=728c5434bb6cd87f5823c3f1ca8804f702bd0a3b;p=cinny.git

Fix blurhash visible under transparent img (#721)
---

diff --git a/src/app/molecules/media/Media.jsx b/src/app/molecules/media/Media.jsx
index 5f081b9..b272ea1 100644
--- a/src/app/molecules/media/Media.jsx
+++ b/src/app/molecules/media/Media.jsx
@@ -158,6 +158,7 @@ function Image({
   name, width, height, link, file, type, blurhash,
 }) {
   const [url, setUrl] = useState(null);
+  const [blur, setBlur] = useState(true);
 
   useEffect(() => {
     let unmounted = false;
@@ -176,8 +177,8 @@ function Image({
     <div className="file-container">
       <FileHeader name={name} link={url || link} type={type} external />
       <div style={{ height: width !== null ? getNativeHeight(width, height) : 'unset' }} className="image-container">
-        { blurhash && <BlurhashCanvas hash={blurhash} punch={1} />}
-        { url !== null && <img src={url || link} alt={name} />}
+        { blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
+        { url !== null && <img onLoad={() => setBlur(false)} src={url || link} alt={name} />}
       </div>
     </div>
   );