From 728c5434bb6cd87f5823c3f1ca8804f702bd0a3b Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 7 Aug 2022 20:14:47 +0530
Subject: [PATCH] Fix blurhash visible under transparent img (#721)

---
 src/app/molecules/media/Media.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/molecules/media/Media.jsx b/src/app/molecules/media/Media.jsx
index 5f081b91..b272ea11 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>
   );