From 3629f318e839c6ed466363e3d90717243e2f59ce Mon Sep 17 00:00:00 2001
From: Naz <65537403+t1enne@users.noreply.github.com>
Date: Sat, 4 Mar 2023 00:25:22 +0100
Subject: [PATCH] removed timers from component in favor of css transition
 (#2769)

* removed timers from component in favor of css transition

* removed semibold text

---------

Co-authored-by: Gabe Kangas <gabek@real-ity.com>
---
 .../chat/ChatContainer/ChatContainer.module.scss | 16 +++++++++++++++-
 .../chat/ChatContainer/ChatContainer.tsx         | 15 +--------------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/web/components/chat/ChatContainer/ChatContainer.module.scss b/web/components/chat/ChatContainer/ChatContainer.module.scss
index f058e830e..ac83ccefd 100644
--- a/web/components/chat/ChatContainer/ChatContainer.module.scss
+++ b/web/components/chat/ChatContainer/ChatContainer.module.scss
@@ -4,13 +4,17 @@
   width: 100%;
   justify-content: center;
   position: absolute;
-  bottom: 50px;
+  bottom: 75px;
   color: var(--theme-color-components-text-on-light);
 
   button {
     background-color: var(--theme-color-background-light);
     z-index: 9999;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    display: flex;
+    align-items: center;
+    opacity: 0;
+    animation: show 250ms forwards ease-in-out 500ms;
   }
 }
 
@@ -38,3 +42,13 @@
 .chatTextField {
   border-top: 1px solid lightgray;
 }
+
+@keyframes show {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  } to {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx
index bbc40dc1c..1199d51b1 100644
--- a/web/components/chat/ChatContainer/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer/ChatContainer.tsx
@@ -99,22 +99,14 @@ export const ChatContainer: FC<ChatContainerProps> = ({
   const [isAtBottom, setIsAtBottom] = useState(false);
 
   const chatContainerRef = useRef(null);
-  const showScrollToBottomButtonDelay = useRef(null);
   const scrollToBottomDelay = useRef(null);
 
   const collapsedMessageIds = new Set<string>();
 
-  const setShowScrolltoBottomButtonWithDelay = (show: boolean) => {
-    showScrollToBottomButtonDelay.current = setTimeout(() => {
-      setShowScrollToBottomButton(show);
-    }, 1500);
-  };
-
   useEffect(
     () =>
       // Clear the timer when the component unmounts
       () => {
-        clearTimeout(showScrollToBottomButtonDelay.current);
         clearTimeout(scrollToBottomDelay.current);
       },
     [],
@@ -213,7 +205,6 @@ export const ChatContainer: FC<ChatContainerProps> = ({
 
   const scrollChatToBottom = (ref, behavior = 'smooth') => {
     clearTimeout(scrollToBottomDelay.current);
-    clearTimeout(showScrollToBottomButtonDelay.current);
     scrollToBottomDelay.current = setTimeout(() => {
       ref.current?.scrollToIndex({
         index: messages.length - 1,
@@ -230,7 +221,6 @@ export const ChatContainer: FC<ChatContainerProps> = ({
   useEffect(() => {
     setTimeout(() => {
       scrollChatToBottom(chatContainerRef, 'auto');
-      setShowScrolltoBottomButtonWithDelay(false);
     }, 500);
   }, []);
 
@@ -246,14 +236,11 @@ export const ChatContainer: FC<ChatContainerProps> = ({
           itemContent={(index, message) => getViewForMessage(index, message)}
           initialTopMostItemIndex={messages.length - 1}
           followOutput={() => {
-            clearTimeout(showScrollToBottomButtonDelay.current);
-
             if (isAtBottom) {
               setShowScrollToBottomButton(false);
               scrollChatToBottom(chatContainerRef, 'auto');
               return 'smooth';
             }
-            setShowScrolltoBottomButtonWithDelay(true);
 
             return false;
           }}
@@ -265,7 +252,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
             if (bottom) {
               setShowScrollToBottomButton(false);
             } else {
-              setShowScrolltoBottomButtonWithDelay(true);
+              setShowScrollToBottomButton(true);
             }
           }}
         />