Introduce ImageOrBlurhash component

ts/components/conversation/Image.tsx

@@ -4,8 +4,8 @@
 import type { CSSProperties } from 'react';
 import React, { useCallback } from 'react';
 import classNames from 'classnames';
-import { Blurhash } from 'react-blurhash';
 
+import { ImageOrBlurhash } from '../ImageOrBlurhash';
 import { Spinner } from '../Spinner';
 import type { LocalizerType, ThemeType } from '../../types/Util';
 import type { AttachmentForUIType } from '../../types/Attachment';
@@ -169,21 +169,17 @@ export function Image({
     showMediaNoLongerAvailableToast
   );
 
-  const imageOrBlurHash = url ? (
-    <img
+  const imageOrBlurHash = (
+    <ImageOrBlurhash
       onError={onError}
       className="module-image__image"
       alt={alt}
       height={height}
       width={width}
+      intrinsicWidth={attachment.width}
+      intrinsicHeight={attachment.height}
       src={url}
-    />
-  ) : (
-    <Blurhash
-      hash={resolvedBlurHash}
-      width={width}
-      height={height}
-      style={{ display: 'block' }}
+      blurHash={resolvedBlurHash}
     />
   );