fix: Prepare image placeholder for not loaded image and prevent jumpi…

…ng (#16941) * fix: Prepare image placeholder for not loaded image and prevent jumping * fix displaying message warning * code improvements * code cleanup * revert message-warning
wireapp · Feb 28, 2024 · b191858 · b191858
1 parent abf1536
commit b191858
Showing 1 changed file with 15 additions and 10 deletions.
diff --git a/src/script/components/MessagesList/Message/ContentMessage/asset/ImageAsset/ImageAsset.tsx b/src/script/components/MessagesList/Message/ContentMessage/asset/ImageAsset/ImageAsset.tsx
@@ -46,6 +46,8 @@ export interface ImageAssetProps {
   isFocusable?: boolean;
 }
 
+const MAX_ASSET_WIDTH = 800;
+
 export const ImageAsset = ({
   asset,
   message,
@@ -103,21 +105,24 @@ export const ImageAsset = ({
     maxWidth: 'var(--conversation-message-asset-width)',
   };
 
+  const isImageWidthLargerThanDefined = parseInt(asset.width, 10) >= MAX_ASSET_WIDTH;
+  const imageWidth = isImageWidthLargerThanDefined ? `${MAX_ASSET_WIDTH}px` : asset.width;
+
   const imageAsset: CSSObject = {
     aspectRatio: isFileSharingReceivingEnabled ? `${asset.ratio}` : undefined,
-    ...(!imageUrl?.url
-      ? {
-          maxWidth: asset.width,
-          maxHeight: asset.height,
-        }
-      : {
-          maxWidth: asset.width,
-          maxHeight: '80vh',
-        }),
+    maxHeight: '80vh',
+    maxWidth: !imageUrl?.url ? '100%' : imageWidth,
+
+    ...(!imageUrl?.url &&
+      !isImageWidthLargerThanDefined && {
+        height: asset.height,
+      }),
   };
 
   const imageStyle: CSSObject = {
-    width: '100%',
+    width: imageWidth,
+    maxWidth: '100%',
+    height: 'auto',
   };
 
   return (