diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index e36e4c3113..cb52155f42 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -55,6 +55,7 @@ export default class MImageBody extends React.Component { static contextType = MatrixClientContext; private unmounted = true; private image = createRef(); + private timeout?: number; constructor(props: IBodyProps) { super(props); @@ -146,12 +147,14 @@ export default class MImageBody extends React.Component { }; private onImageError = (): void => { + this.clearBlurhashTimeout(); this.setState({ imgError: true, }); }; private onImageLoad = (): void => { + this.clearBlurhashTimeout(); this.props.onHeightChanged(); let loadedImageDimensions; @@ -267,6 +270,13 @@ export default class MImageBody extends React.Component { } } + private clearBlurhashTimeout() { + if (this.timeout) { + clearTimeout(this.timeout); + this.timeout = undefined; + } + } + componentDidMount() { this.unmounted = false; this.context.on('sync', this.onClientSync); @@ -281,8 +291,9 @@ export default class MImageBody extends React.Component { } // 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.props.mxEvent.getContent().info?.[BLURHASH_FIELD]) { + this.clearBlurhashTimeout(); + this.timeout = setTimeout(() => { if (!this.state.imgLoaded || !this.state.imgError) { this.setState({ placeholder: 'blurhash', @@ -295,6 +306,7 @@ export default class MImageBody extends React.Component { componentWillUnmount() { this.unmounted = true; this.context.removeListener('sync', this.onClientSync); + this.clearBlurhashTimeout(); } protected messageContent(