From 5bb3710d51cdf468a7b97ba18c2ccf8efc39e8a2 Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Thu, 12 Dec 2024 17:12:40 +0400
Subject: [PATCH] fix: chat not being scrolled to bottom (images)

Closes https://github.com/deltachat/deltachat-desktop/issues/4404.

The bug was introduced in db8327931ef.
Prior to that all attachments had a fixed height of 200px.

This should also eliminate layout shifting when scrolling the chat,
and when new messages arrive.

An alternative solution that would still have layout shifting,
but at least keep the chat "anchored" to bottom would be
https://github.com/deltachat/deltachat-desktop/issues/3753#issuecomment-2336809190,
but it's not supported well by browsers.
---
 CHANGELOG.md                                  |  1 +
 .../components/attachment/mediaAttachment.tsx | 10 +++++++
 .../attachment/messageAttachment.tsx          | 28 +++++++++++++++++++
 3 files changed, 39 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5ff2ac75f7..a09c2ff31c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 ## Fixed
 - handle double escape on Dialog #4365
 - fix random crashes on quote reply #4337
+- chat not being scrolled to the very bottom upon getting opened due to images loading slowly #
 - avoid drafts in readonly chats #4349
 - fullscreen images getting cropped a little #4402, #4385
 
diff --git a/packages/frontend/src/components/attachment/mediaAttachment.tsx b/packages/frontend/src/components/attachment/mediaAttachment.tsx
index 1512e9c473..4135902d14 100644
--- a/packages/frontend/src/components/attachment/mediaAttachment.tsx
+++ b/packages/frontend/src/components/attachment/mediaAttachment.tsx
@@ -231,6 +231,11 @@ export function ImageAttachment({
             className='attachment-content'
             src={runtime.transformBlobURL(file)}
             loading='lazy'
+            // Pre-setting `height` and `width` from
+            // `message.dimensionsHeight`, as we do in the message list,
+            // could be used here
+            // to prevent layout shifts, but it's not needed,
+            // because this is fixed-size anyway.
           />
         )}
       </button>
@@ -301,6 +306,11 @@ export function VideoAttachment({
               className='attachment-content'
               src={runtime.transformBlobURL(file)}
               controls={false}
+              // Pre-setting `height` and `width` from
+              // `message.dimensionsHeight`, as we do in the message list,
+              // could be used here
+              // to prevent layout shifts, but it's not needed,
+              // because this is fixed-size anyway.
             />
             <div className='video-play-btn'>
               <div className='video-play-btn-icon' />
diff --git a/packages/frontend/src/components/attachment/messageAttachment.tsx b/packages/frontend/src/components/attachment/messageAttachment.tsx
index 8004dd698a..a65cd93cfd 100644
--- a/packages/frontend/src/components/attachment/messageAttachment.tsx
+++ b/packages/frontend/src/components/attachment/messageAttachment.tsx
@@ -22,6 +22,7 @@ import FullscreenMedia, {
 import useTranslationFunction from '../../hooks/useTranslationFunction'
 import useDialog from '../../hooks/dialog/useDialog'
 import AudioPlayer from '../AudioPlayer'
+import { T } from '@deltachat/jsonrpc-client'
 
 type AttachmentProps = {
   text?: string
@@ -86,6 +87,11 @@ export default function Attachment({
         <img
           className='attachment-content'
           src={runtime.transformBlobURL(message.file)}
+          // Pre-set width and height to prevent layout shifts
+          // when the image finally loads.
+          // This is not supposed to affect the rendered dimensions
+          // of the media _after_ it has been loaded.
+          style={getDimensions(message)}
         />
       </button>
     )
@@ -114,6 +120,11 @@ export default function Attachment({
           className='attachment-content video-content'
           src={runtime.transformBlobURL(message.file)}
           controls={true}
+          // Pre-set width and height to prevent layout shifts
+          // when the video finally loads.
+          // This is not supposed to affect the rendered dimensions
+          // of the media _after_ it has been loaded.
+          style={getDimensions(message)}
         />
       </div>
     )
@@ -217,3 +228,20 @@ export function DraftAttachment({
     )
   }
 }
+
+function getDimensions(
+  message: Pick<T.Message, 'dimensionsHeight' | 'dimensionsWidth'>
+): { height: number | undefined; width?: number | undefined } {
+  // With some sanity checks, in case core couldn't determine dimensions
+  // for whatever reason, but the browser might.
+  return {
+    height:
+      message.dimensionsHeight > 0 && message.dimensionsHeight < 100_000
+        ? message.dimensionsHeight
+        : undefined,
+    width:
+      message.dimensionsWidth > 0 && message.dimensionsWidth < 100_000
+        ? message.dimensionsWidth
+        : undefined,
+  }
+}