From ee155f7369e941471bbdee1a743a32a8da33c23c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6ssner?= <jakob.roessner@outlook.de>
Date: Tue, 5 Nov 2024 12:51:01 +1100
Subject: [PATCH] fix: behaviours on chat page

- updated styles so the loading bar is in the center

- updated the useScrollBehaviourHook to not scroll down on the first render the messages
---
 .../(internal-sites)/chats/[chatId]/page.tsx   | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/app/(internal-sites)/chats/[chatId]/page.tsx b/src/app/(internal-sites)/chats/[chatId]/page.tsx
index 8e28a275..960daff1 100644
--- a/src/app/(internal-sites)/chats/[chatId]/page.tsx
+++ b/src/app/(internal-sites)/chats/[chatId]/page.tsx
@@ -75,6 +75,7 @@ const useScrollBehavior = (
 ) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const [isNearBottom, setIsNearBottom] = useState(true);
+  const isFirstLoad = useRef(true);
 
   const handleScroll = useCallback(() => {
     if (messagesEndRef.current) {
@@ -87,18 +88,25 @@ const useScrollBehavior = (
     }
   }, []);
 
-  const scrollToBottom = useCallback(() => {
+  const scrollToBottom = useCallback((smooth = true) => {
     if (messagesEndRef.current) {
       messagesEndRef.current.scrollTo({
         top: messagesEndRef.current.scrollHeight,
-        behavior: "smooth",
+        behavior: smooth ? "smooth" : "instant",
       });
     }
   }, []);
 
-  // Scroll handling for new messages
+  // Handle initial scroll and subsequent message updates
   useEffect(() => {
-    scrollToBottom();
+    if (messages) {
+      if (isFirstLoad.current) {
+        scrollToBottom(false); // Instant scroll on the first load (it should be at the bottom of the messages without scrolling on the first load)
+        isFirstLoad.current = false;
+      } else {
+        scrollToBottom(true); // Smooth scroll for new messages
+      }
+    }
   }, [messages, scrollToBottom]);
 
   return {
@@ -355,7 +363,7 @@ export default function Page(props: { params: Promise<{ chatId: string }> }) {
             onScroll={handleScroll}
             ref={messagesEndRef}
           >
-            <div className="relative min-h-full w-full">
+            <div className="relative h-full w-full">
               {messages.data ? (
                 <>
                   {messages.data.map((message, key) => (