fix: Fix scroll issue on the AddOperatorsModal and MutedMembersModal (#1014)

### ChangeLog & Fix
* Fixed a specific environment issue (Android emulator) - Resolved an
issue in modals used in ChannelSettings such as MembersModal,
MutedMembersModal, OperatorsModal, BannedUsersModal,
**AddOperatorsModal**, where even when scrolling to the end, additional
members were not fetched

Author: HoonBaek

src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx

@@ -4,6 +4,7 @@ import React, {
   useState,
   useContext,
 } from 'react';
+import { OperatorFilter } from '@sendbird/chat/groupChannel';
 
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import Modal from '../../../../ui/Modal';
@@ -14,7 +15,7 @@ import Label, {
 import { ButtonTypes } from '../../../../ui/Button';
 import UserListItem from '../../../../ui/UserListItem';
 import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
-import { OperatorFilter } from '@sendbird/chat/groupChannel';
+import { useOnScrollPositionChangeDetector } from '../../../../hooks/useOnScrollReachedEndDetector';
 
 interface Props {
   onCancel(): void;
@@ -67,21 +68,19 @@ export default function AddOperatorsModal({
         </Label>
         <div
           className="sendbird-more-members__popup-scroll"
-          onScroll={(e) => {
-            const { hasNext } = memberQuery;
-            const target = e.target as HTMLTextAreaElement;
-            const fetchMore = (
-              target.clientHeight + target.scrollTop === target.scrollHeight
-            );
-            if (hasNext && fetchMore) {
-              memberQuery.next().then((o) => {
-                setMembers([
-                  ...members,
-                  ...o,
-                ]);
-              });
-            }
-          }}
+          onScroll={useOnScrollPositionChangeDetector({
+            onReachedBottom: async () => {
+              const { hasNext } = memberQuery;
+              if (hasNext) {
+                memberQuery.next().then((o) => {
+                  setMembers([
+                    ...members,
+                    ...o,
+                  ]);
+                });
+              }
+            },
+          })}
         >
           {
             members.map((member) => (

src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx

@@ -32,7 +32,7 @@ export default function MutedMembersModal({
 
   useEffect(() => {
     const memberUserListQuery = channel?.createMemberListQuery({
-      limit: 10,
+      limit: 20,
       // @ts-ignore
       mutedMemberFilter: 'muted',
     });