fix: scroll bottom check properly in markAsRead (#1052)

ticket: [CLNP-2897]

[CLNP-2897]:
https://sendbird.atlassian.net/browse/CLNP-2897?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: bang9

src/modules/GroupChannel/context/GroupChannelProvider.tsx

@@ -28,6 +28,7 @@ import { PubSubTypes } from '../../../lib/pubSub';
 import { useMessageActions } from './hooks/useMessageActions';
 import { usePreventDuplicateRequest } from './hooks/usePreventDuplicateRequest';
 import { getIsReactionEnabled } from '../../../utils/getIsReactionEnabled';
+import { SCROLL_BUFFER } from '../../../utils/consts';
 
 type OnBeforeHandler<T> = (params: T) => T | Promise<T>;
 type MessageListQueryParamsType = Omit<MessageCollectionParams, 'filter'> & MessageFilterParams;
@@ -180,7 +181,9 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
     collectionCreator: getCollectionCreator(currentChannel, messageListQueryParams),
     shouldCountNewMessages: () => !isScrollBottomReached,
     markAsRead: (channels) => {
-      if (!disableMarkAsRead && isScrollBottomReached) {
+      // isScrollBottomReached is a state that is updated after the render is completed.
+      // So, we use scrollDistanceFromBottomRef to check quickly if the scroll is at the bottom.
+      if (!disableMarkAsRead && scrollDistanceFromBottomRef.current <= SCROLL_BUFFER) {
         channels.forEach((it) => markAsReadScheduler.push(it));
       }
     },

src/modules/GroupChannel/context/hooks/useMessageListScroll.ts

@@ -47,6 +47,12 @@ export function useMessageListScroll(behavior: 'smooth' | 'auto') {
   const [scrollPubSub] = useState(() => pubSubFactory<ScrollTopics, ScrollTopicUnion>());
   const [isScrollBottomReached, setIsScrollBottomReached] = useState(false);
 
+  // If there is no area to scroll, it is considered as scroll bottom reached.
+  if (isScrollBottomReached === false && scrollRef.current && scrollRef.current.scrollHeight <= scrollRef.current.clientHeight) {
+    scrollDistanceFromBottomRef.current = 0;
+    setIsScrollBottomReached(true);
+  }
+
   useLayoutEffect(() => {
     const unsubscribes: { remove(): void }[] = [];