From e5635726ac9449d7337fffcce6e8dca04bfa79f1 Mon Sep 17 00:00:00 2001
From: Jamie Kyle <113370520+jamiebuilds-signal@users.noreply.github.com>
Date: Mon, 31 Jul 2023 11:46:16 -0700
Subject: [PATCH] optimize timeline scroll performance

---
 ts/components/conversation/Timeline.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/ts/components/conversation/Timeline.tsx b/ts/components/conversation/Timeline.tsx
index dd62c58bd..035b7290a 100644
--- a/ts/components/conversation/Timeline.tsx
+++ b/ts/components/conversation/Timeline.tsx
@@ -399,12 +399,14 @@ export class Timeline extends React.Component<
         const newestBottomVisibleMessageId =
           getMessageIdFromElement(newestBottomVisible);
 
-        this.setState({
+        this.updatePartiallyVisibleMessageIds(
           oldestPartiallyVisibleMessageId,
-          newestBottomVisibleMessageId,
-        });
+          newestBottomVisibleMessageId
+        );
 
-        setIsNearBottom(id, newIsNearBottom);
+        if (this.props.isNearBottom !== newIsNearBottom) {
+          setIsNearBottom(id, newIsNearBottom);
+        }
 
         if (newestBottomVisibleMessageId) {
           this.markNewestBottomVisibleMessageRead();
@@ -461,6 +463,19 @@ export class Timeline extends React.Component<
     this.intersectionObserver.observe(atBottomDetectorEl);
   }
 
+  private updatePartiallyVisibleMessageIds = throttle(
+    (
+      oldestPartiallyVisibleMessageId: string | undefined,
+      newestBottomVisibleMessageId: string | undefined
+    ) => {
+      this.setState({
+        oldestPartiallyVisibleMessageId,
+        newestBottomVisibleMessageId,
+      });
+    },
+    100
+  );
+
   private markNewestBottomVisibleMessageRead = throttle((): void => {
     const { id, markMessageRead } = this.props;
     const { newestBottomVisibleMessageId } = this.state;