scroll to bottom on load

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">

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">