From 7adfbf6f98741b95732aa9072040ff9d4925b66d Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <dariuszn@element.io>
Date: Thu, 19 Aug 2021 07:48:44 +0200
Subject: [PATCH] Show blurhash only after 150ms

Blurhash on every single room entrance was extremely annoying, to the
point where it wasn't really helpful, but distracting, even after
the animations was added.
This commit makes it so the blurhash is only shown after 150ms, and the
image will be animated as a quick fade-in if there's no blurhash.

Fixes https://github.com/vector-im/element-web/issues/18617
Fixes https://github.com/vector-im/element-web/issues/17879
---
 res/css/views/messages/_MImageBody.scss      |  4 ++++
 src/components/views/messages/MImageBody.tsx | 22 +++++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
index 765c74a36d..b3a62896b2 100644
--- a/res/css/views/messages/_MImageBody.scss
+++ b/res/css/views/messages/_MImageBody.scss
@@ -36,6 +36,10 @@ $timelineImageBorderRadius: 4px;
         animation: mx--anim-pulse 1.75s infinite cubic-bezier(.4, 0, .6, 1);
         border-radius: $timelineImageBorderRadius;
     }
+
+    .mx_no-image-placeholder {
+        background-color: $primary-bg-color;
+    }
 }
 
 .mx_MImageBody_thumbnail_container {
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index e7b77b731f..286d420c58 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -47,6 +47,7 @@ interface IState {
     };
     hover: boolean;
     showImage: boolean;
+    placeholder: 'no-image' | 'blurhash';
 }
 
 @replaceableComponent("views.messages.MImageBody")
@@ -68,6 +69,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
             loadedImageDimensions: null,
             hover: false,
             showImage: SettingsStore.getValue("showImages"),
+            placeholder: 'no-image',
         };
     }
 
@@ -277,6 +279,17 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
             this.downloadImage();
             this.setState({ showImage: true });
         } // else don't download anything because we don't want to display anything.
+
+        // Add a 150ms timer for blurhash to first appear.
+        if (this.media.isEncrypted) {
+            setTimeout(() => {
+                if (!this.state.imgLoaded || !this.state.imgError) {
+                    this.setState({
+                        placeholder: 'blurhash',
+                    });
+                }
+            }, 150);
+        }
     }
 
     componentWillUnmount() {
@@ -434,7 +447,14 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     // Overidden by MStickerBody
     protected getPlaceholder(width: number, height: number): JSX.Element {
         const blurhash = this.props.mxEvent.getContent().info[BLURHASH_FIELD];
-        if (blurhash) return <Blurhash className="mx_Blurhash" hash={blurhash} width={width} height={height} />;
+
+        if (blurhash) {
+            if (this.state.placeholder === 'no-image') {
+                return <div className="mx_no-image-placeholder" style={{ width: width, height: height }} />;
+            } else if (this.state.placeholder === 'blurhash') {
+                return <Blurhash className="mx_Blurhash" hash={blurhash} width={width} height={height} />;
+            }
+        }
         return (
             <InlineSpinner w={32} h={32} />
         );