From 852662f946e98d52c7f5d3ef1da6a854b197bdd9 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Mon, 30 Sep 2024 07:00:24 -0700
Subject: [PATCH] Use requestAnimationFrame for synced scroll on chat in web
 app

Make all the scroll actions just use requestAnimationFrame instead of
setTimeout. It better aligns with browser rendering loop, so better
for UX changes than setTimeout
---
 .../web/app/components/chatHistory/chatHistory.tsx          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/interface/web/app/components/chatHistory/chatHistory.tsx b/src/interface/web/app/components/chatHistory/chatHistory.tsx
index e42dc4ed..348b6c12 100644
--- a/src/interface/web/app/components/chatHistory/chatHistory.tsx
+++ b/src/interface/web/app/components/chatHistory/chatHistory.tsx
@@ -100,16 +100,16 @@ export default function ChatHistory(props: ChatHistoryProps) {
     // Auto scroll while incoming message is streamed
     useEffect(() => {
         if (props.incomingMessages && props.incomingMessages.length > 0 && isNearBottom) {
-            setTimeout(scrollToBottom, 0);
+            scrollToBottom();
         }
     }, [props.incomingMessages, isNearBottom]);
 
     // Scroll to most recent user message after the first page of chat messages is loaded.
     useEffect(() => {
         if (data && data.chat && data.chat.length > 0 && currentPage < 2) {
-            setTimeout(() => {
+            requestAnimationFrame(() => {
                 latestUserMessageRef.current?.scrollIntoView({ behavior: "auto", block: "start" });
-            }, 0);
+            });
         }
     }, [data, currentPage]);