message: Fix unnecessary blurhash rendering
diff: @@ -55,6 +55,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
  static contextType = MatrixClientContext;
  private unmounted = true;
  private image = createRef<HTMLImageElement>();
  + private timeout?: number;
  constructor(props: IBodyProps) {
  super(props);
  @@ -146,12 +147,14 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
  };
  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<IBodyProps, IState> {
  }
  }
  + 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<IBodyProps, IState> {
  } // 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<IBodyProps, IState> {
  componentWillUnmount() {
  this.unmounted = true;
  this.context.removeListener('sync', this.onClientSync);
  + this.clearBlurhashTimeout();
  }
  protected messageContent(
  