fix: remove redundant loadMore from member hooks

Author: szuperaz

package/src/components/ChannelDetailsScreen/__tests__/members/ChannelAddMembers.test.tsx

@@ -71,7 +71,6 @@ const baseHookResult = (): UseChannelAddMembersResult => ({
   isAlreadyMember: jest.fn(() => false),
   isSelected: jest.fn(() => false),
   loading: false,
-  loadingMore: false,
   loadMore: jest.fn(),
   onChangeSearchText: jest.fn(),
   results: [],
@@ -170,8 +169,8 @@ describe('ChannelAddMembers', () => {
     expect(screen.getByText('No user found')).toBeTruthy();
   });
 
-  it('renders the loading-more indicator only while loadingMore is true', () => {
-    mockHook({ loadingMore: true });
+  it('renders the loading-more indicator only while loading with existing results', () => {
+    mockHook({ loading: true, results: [generateUser({ id: 'alice' })] });
     renderComponent();
     expect(screen.UNSAFE_getByType(require('react-native').ActivityIndicator)).toBeTruthy();
   });

package/src/components/ChannelDetailsScreen/__tests__/members/ChannelMemberList.test.tsx

@@ -49,7 +49,6 @@ type HookResult = ReturnType<typeof useChannelAllMembers>;
 const baseHookResult = (): HookResult => ({
   hasMore: false,
   loading: false,
-  loadingMore: false,
   loadMore: jest.fn(),
   results: [],
 });
@@ -186,15 +185,16 @@ describe('ChannelMemberList', () => {
     expect(latestListProps()?.onEndReached).toBeUndefined();
   });
 
-  it('renders a footer spinner only while loadingMore', () => {
-    mockHook({ loadingMore: true, results: [] });
+  it('renders a footer spinner only while loading more (loading with existing results)', () => {
+    const results = [generateMember({ user: generateUser({ id: 'alice' }) })];
+    mockHook({ loading: true, results });
     renderList();
     const footer = latestListProps()?.ListFooterComponent as React.ReactElement;
     expect(footer).not.toBeNull();
     expect(footer.type).toBe(ActivityIndicator);
 
     mockFlatList.mockClear();
-    mockHook({ loadingMore: false, results: [] });
+    mockHook({ loading: false, results });
     renderList();
     expect(latestListProps()?.ListFooterComponent).toBeNull();
   });

package/src/components/ChannelDetailsScreen/__tests__/members/useChannelAddMembers.test.tsx

@@ -153,7 +153,7 @@ describe('useChannelAddMembers', () => {
     await waitFor(() => expect(queryUsers).toHaveBeenCalledTimes(2));
     expect(queryUsers).toHaveBeenNthCalledWith(2, {}, { name: 1 }, { limit: 25, offset: 25 });
 
-    await waitFor(() => expect(result.current.loadingMore).toBe(false));
+    await waitFor(() => expect(result.current.loading).toBe(false));
     // 25 + 10 fresh (the overlapping page1 row is deduped away)
     expect(result.current.results).toHaveLength(35);
     expect(result.current.hasMore).toBe(false);

package/src/components/ChannelDetailsScreen/__tests__/members/useChannelAllMembers.test.tsx

@@ -59,7 +59,6 @@ describe('useChannelAllMembers', () => {
       expect(result.current.results.map((m) => m.user?.id)).toEqual(['u-0', 'u-1', 'u-2']);
       expect(result.current.hasMore).toBe(false);
       expect(result.current.loading).toBe(false);
-      expect(result.current.loadingMore).toBe(false);
     });
 
     it('treats undefined member_count as fully loaded', () => {
@@ -137,7 +136,7 @@ describe('useChannelAllMembers', () => {
         { limit: 25, offset: 25 },
       );
 
-      await waitFor(() => expect(result.current.loadingMore).toBe(false));
+      await waitFor(() => expect(result.current.loading).toBe(false));
       expect(result.current.results).toHaveLength(35);
       expect(result.current.hasMore).toBe(false);
     });
@@ -181,15 +180,16 @@ describe('useChannelAllMembers', () => {
       await waitFor(() => expect(result.current.loading).toBe(false));
 
       act(() => result.current.loadMore());
-      await waitFor(() => expect(result.current.loadingMore).toBe(true));
+      await waitFor(() => expect(result.current.loading).toBe(true));
+      expect(result.current.results.length).toBeGreaterThan(0);
 
       act(() => result.current.loadMore());
       act(() => result.current.loadMore());
 
       expect(queryMembers).toHaveBeenCalledTimes(2);
 
       act(() => resolveSecond?.({ members: buildMembers(25, 'page2') }));
-      await waitFor(() => expect(result.current.loadingMore).toBe(false));
+      await waitFor(() => expect(result.current.loading).toBe(false));
     });
 
     it('recovers from a queryMembers rejection', async () => {
@@ -204,7 +204,6 @@ describe('useChannelAllMembers', () => {
 
       await waitFor(() => expect(result.current.loading).toBe(false));
       expect(result.current.results).toEqual([]);
-      expect(result.current.loadingMore).toBe(false);
       expect(warnSpy).toHaveBeenCalledWith(
         '[useChannelAllMembers] queryMembers failed',
         expect.any(Error),

package/src/components/ChannelDetailsScreen/components/members/ChannelAddMembers.tsx

@@ -52,7 +52,6 @@ export const ChannelAddMembers = ({
     isAlreadyMember,
     isSelected,
     loading,
-    loadingMore,
     loadMore,
     onChangeSearchText,
     results,
@@ -88,7 +87,7 @@ export const ChannelAddMembers = ({
     />
   );
 
-  const loadingMoreIndicator = <>{loadingMore && <ActivityIndicator />}</>;
+  const loadingMoreIndicator = <>{loading && results.length > 0 && <ActivityIndicator />}</>;
 
   return (
     <View style={styles.container}>

package/src/components/ChannelDetailsScreen/components/members/ChannelMemberList.tsx

@@ -28,7 +28,7 @@ export type ChannelMemberListProps = {
 export const ChannelMemberList = ({ additionalFlatListProps }: ChannelMemberListProps = {}) => {
   const { channel, onMemberPress } = useChannelDetailsContext();
   const { ChannelMemberActionsSheet, ChannelMemberItem } = useComponentsContext();
-  const { hasMore, loading, loadingMore, loadMore, results } = useChannelAllMembers({ channel });
+  const { hasMore, loading, loadMore, results } = useChannelAllMembers({ channel });
   const [selectedMember, setSelectedMember] = useState<ChannelMemberResponse | null>(null);
 
   const handleMemberActionsClose = useCallback(() => setSelectedMember(null), []);
@@ -52,8 +52,8 @@ export const ChannelMemberList = ({ additionalFlatListProps }: ChannelMemberList
   );
 
   const ListFooterComponent = useMemo(
-    () => (loadingMore ? <ActivityIndicator /> : null),
-    [loadingMore],
+    () => (loading && results.length > 0 ? <ActivityIndicator /> : null),
+    [loading, results.length],
   );
 
   if (loading && results.length === 0) {

package/src/components/ChannelDetailsScreen/hooks/members/useChannelAddMembers.ts

@@ -17,7 +17,6 @@ export type UseChannelAddMembersResult = {
   isAlreadyMember: (userId: string) => boolean;
   isSelected: (userId: string) => boolean;
   loading: boolean;
-  loadingMore: boolean;
   loadMore: () => void;
   onChangeSearchText: (text: string) => void;
   results: UserResponse[];
@@ -40,7 +39,6 @@ export const useChannelAddMembers = ({
   const [results, setResults] = useState<UserResponse[]>([]);
   const [selectedUsers, setSelectedUsers] = useState<UserResponse[]>([]);
   const [loading, setLoading] = useState(true);
-  const [loadingMore, setLoadingMore] = useState(false);
   const [hasMore, setHasMore] = useState(true);
 
   const queryRef = useRef('');
@@ -55,10 +53,8 @@ export const useChannelAddMembers = ({
     async ({ append, query }: { append: boolean; query: string }) => {
       const requestId = ++requestIdRef.current;
       inFlightRef.current = true;
-      if (append) {
-        setLoadingMore(true);
-      } else {
-        setLoading(true);
+      setLoading(true);
+      if (!append) {
         offsetRef.current = 0;
         setHasMore(true);
       }
@@ -104,7 +100,6 @@ export const useChannelAddMembers = ({
         if (requestId === requestIdRef.current) {
           inFlightRef.current = false;
           setLoading(false);
-          setLoadingMore(false);
         }
       }
     },
@@ -170,7 +165,6 @@ export const useChannelAddMembers = ({
     isAlreadyMember,
     isSelected,
     loading,
-    loadingMore,
     loadMore,
     onChangeSearchText,
     results,

package/src/components/ChannelDetailsScreen/hooks/members/useChannelAllMembers.ts

@@ -9,7 +9,6 @@ const PAGE_SIZE = 25;
 export type UseChannelAllMembersResult = {
   hasMore: boolean;
   loading: boolean;
-  loadingMore: boolean;
   loadMore: () => void;
   results: ChannelMemberResponse[];
 };
@@ -37,7 +36,6 @@ export const useChannelAllMembers = ({
 
   const [results, setResults] = useState<ChannelMemberResponse[]>([]);
   const [loading, setLoading] = useState(mode === 'paginated');
-  const [loadingMore, setLoadingMore] = useState(false);
   const [hasMore, setHasMore] = useState(mode === 'paginated');
 
   const offsetRef = useRef(0);
@@ -48,10 +46,8 @@ export const useChannelAllMembers = ({
     async ({ append }: { append: boolean }) => {
       const requestId = ++requestIdRef.current;
       inFlightRef.current = true;
-      if (append) {
-        setLoadingMore(true);
-      } else {
-        setLoading(true);
+      setLoading(true);
+      if (!append) {
         offsetRef.current = 0;
         setHasMore(true);
       }
@@ -84,7 +80,6 @@ export const useChannelAllMembers = ({
         if (requestId === requestIdRef.current) {
           inFlightRef.current = false;
           setLoading(false);
-          setLoadingMore(false);
         }
       }
     },
@@ -114,11 +109,10 @@ export const useChannelAllMembers = ({
     return {
       hasMore: false,
       loading: false,
-      loadingMore: false,
       loadMore: noop,
       results: localResults,
     };
   }
 
-  return { hasMore, loading, loadingMore, loadMore, results };
+  return { hasMore, loading, loadMore, results };
 };