From f42c013efa55fc8c2259fb638dd24bfc5620d5ea Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sun, 28 May 2023 14:32:31 +0200
Subject: [PATCH] [Perf] Message List: Avoid layout effect during animation

---
 src/components/middle/MessageList.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/middle/MessageList.tsx b/src/components/middle/MessageList.tsx
index ee61e87c4..2156dc9fe 100644
--- a/src/components/middle/MessageList.tsx
+++ b/src/components/middle/MessageList.tsx
@@ -422,6 +422,16 @@ const MessageList: FC<OwnProps & StateProps> = ({
     const prevContainerHeight = prevContainerHeightRef.current;
     prevContainerHeightRef.current = containerHeight;
 
+    // Skip initial resize observer callback
+    if (
+      messageIds === prevMessageIds
+      && isViewportNewest === prevIsViewportNewest
+      && containerHeight !== prevContainerHeight
+      && prevContainerHeight === undefined
+    ) {
+      return;
+    }
+
     const container = containerRef.current!;
     listItemElementsRef.current = Array.from(container.querySelectorAll<HTMLDivElement>('.message-list-item'));
     const lastItemElement = listItemElementsRef.current[listItemElementsRef.current.length - 1];