Fix blurhash visible under transparent img (#721)

diff --git a/src/app/molecules/media/Media.jsx b/src/app/molecules/media/Media.jsx
index 5f081b91422d6519f437d4dc8a103eef6952c08b..b272ea112a39d674b59e781eb6f02e348930340c 100644 (file)
--- 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>
   );