From ee6b78afffd86235d78a613140c50165e5c92eb3 Mon Sep 17 00:00:00 2001
From: Guillaume Dorce <polynux.dev@gmail.com>
Date: Thu, 6 Oct 2022 16:42:05 +0200
Subject: [PATCH] scroll to bottom on load

---
 client/src/components/MessageWrapper.tsx |  4 ++++
 client/src/components/ScrollToBottom.tsx | 10 +++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/client/src/components/MessageWrapper.tsx b/client/src/components/MessageWrapper.tsx
index bba1bd8..c36cccf 100644
--- a/client/src/components/MessageWrapper.tsx
+++ b/client/src/components/MessageWrapper.tsx
@@ -14,6 +14,10 @@ const MessageWrapper = () => {
       toastError(error as string);
     },
   });
+  
+  if (isLoading || isError) {
+    return null;
+  }
 
   return (
     <main className="messages-wrapper rounded-md w-full max-w-3xl flex flex-col max-h-[83vh] relative">
diff --git a/client/src/components/ScrollToBottom.tsx b/client/src/components/ScrollToBottom.tsx
index 49a0025..8e5f138 100644
--- a/client/src/components/ScrollToBottom.tsx
+++ b/client/src/components/ScrollToBottom.tsx
@@ -1,8 +1,12 @@
-import { ReactNode, useRef } from 'react';
+import { ReactNode, useCallback, useState } from 'react';
 import { FaChevronDown } from 'react-icons/fa';
 
 const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; className?: string }) => {
-  const bottom = useRef<HTMLDivElement>(null);
+  const [node, setNode] = useState<HTMLDivElement | null>(null);
+  const bottom = useCallback((node: HTMLDivElement) => {
+      node.scrollIntoView({ behavior: 'smooth' });
+      setNode(node);
+  }, []);
 
   return (
     <>
@@ -11,7 +15,7 @@ const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; cla
         <div className="scroll-bottom" ref={bottom}></div>
       </div>
       <button
-        onClick={() => bottom?.current?.scrollIntoView({ behavior: 'smooth' })}
+        onClick={() => node?.scrollIntoView({ behavior: 'smooth' })}
         className="absolute right-3 bottom-3"
       >
           <div className="popup-btn cursor-pointer rounded-full bg-grey-dark hover:bg-grey-light transition-all">