fix: Clear scrollToMessage on loading (#637)

Clear `scrollBottom` on channel state loading
 
Fixes: https://sendbird.atlassian.net/browse/UIKIT-4137

Author: Sravan S

src/modules/Channel/components/MessageList/hooks/__test__/useSetScrollToBottom.spec.tsx

@@ -8,7 +8,7 @@ jest.mock('../../../../../../hooks/useDebounce', () => ({
 }));
 
 const ScrollComponent = () => {
-  const { scrollBottom, scrollToBottomHandler } = useSetScrollToBottom();
+  const { scrollBottom, scrollToBottomHandler } = useSetScrollToBottom({ loading: true });
 
   return (
     <div style={{ height: '100px', overflowY: 'scroll' }} onScroll={scrollToBottomHandler}>
@@ -20,7 +20,7 @@ const ScrollComponent = () => {
 describe('Channel/useSetScrollToBottom ', () => {
   it('should set scrollBottom as zero on initial render', () => {
     const { result } = renderHook(() => {
-      const myGreeting = useSetScrollToBottom();
+      const myGreeting = useSetScrollToBottom({ loading: true });
       return myGreeting;
     }, {
       initialProps: { a: 'Alice', b: 'Bob' },
@@ -29,6 +29,18 @@ describe('Channel/useSetScrollToBottom ', () => {
     expect(scrollBottom).toBe(0);
   });
 
+  it('should reset scrollToBottom when loading state changes', () => {
+    const { result, rerender } = renderHook(({ loading }) => {
+      const myGreeting = useSetScrollToBottom({ loading });
+      return myGreeting;
+    }, {
+      initialProps: { loading: true },
+    });
+    rerender({ loading: false });
+    const { scrollBottom } = result.current;
+    expect(scrollBottom).toBe(0);
+  });
+
   it('should calculate correct value on scrollToBottom on execution', () => {
     const { container } = render(<ScrollComponent />);
     const scrollElement = container.firstChild as Element;

src/modules/Channel/components/MessageList/hooks/useSetScrollToBottom.ts

@@ -1,13 +1,22 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDebounce } from '../../../../../hooks/useDebounce';
 
 const DELAY = 500;
 
-export function useSetScrollToBottom(): ({
+export function useSetScrollToBottom({
+  loading,
+}: {
+  loading: boolean;
+}): ({
   scrollBottom: number;
   scrollToBottomHandler: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
 }) {
   const [scrollBottom, setScrollBottom] = useState(0);
+  useEffect(() => {
+    if (loading) {
+      setScrollBottom(0);
+    }
+  }, [loading]);
   const scrollCb = (e: React.UIEvent<HTMLDivElement, UIEvent>) => {
     const element = e.target as HTMLDivElement;
     try {

src/modules/Channel/components/MessageList/index.tsx

@@ -147,7 +147,7 @@ const MessageList: React.FC<MessageListProps> = ({
     scrollRef,
   });
 
-  const { scrollToBottomHandler, scrollBottom } = useSetScrollToBottom();
+  const { scrollToBottomHandler, scrollBottom } = useSetScrollToBottom({ loading });
 
   if (loading) {
     return (typeof renderPlaceholderLoader === 'function')