fix: prevent flashing EmptyStateIndicator in ChannelList before the first channels page is loaded (#2150)

Author: MartinCupela

src/components/ChannelList/ChannelList.tsx

@@ -350,7 +350,10 @@ const UnMemoizedChannelList = <
           <List
             error={channelsQueryState.error}
             loadedChannels={sendChannelsToList ? loadedChannels : undefined}
-            loading={channelsQueryState.queryInProgress === 'reload'}
+            loading={
+              !!channelsQueryState.queryInProgress &&
+              ['reload', 'uninitialized'].includes(channelsQueryState.queryInProgress)
+            }
             LoadingErrorIndicator={LoadingErrorIndicator}
             LoadingIndicator={LoadingIndicator}
             setChannels={setChannels}

src/components/ChannelList/__tests__/ChannelList.test.js

@@ -36,7 +36,8 @@ import {
   ChannelPreviewMessenger,
 } from '../../ChannelPreview';
 
-import { ChatContext } from '../../../context/ChatContext';
+import { ChatContext, useChatContext } from '../../../context/ChatContext';
+import { ChannelListMessenger } from '../ChannelListMessenger';
 
 expect.extend(toHaveNoViolations);
 
@@ -256,6 +257,42 @@ describe('ChannelList', () => {
     expect(results).toHaveNoViolations();
   });
 
+  it('should render loading indicator before the first channel list load and on reload', async () => {
+    const channelsQueryStatesHistory = [];
+    const channelListMessengerLoadingHistory = [];
+    useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
+
+    const QueryStateInterceptor = ({ children }) => {
+      const { channelsQueryState } = useChatContext();
+      channelsQueryStatesHistory.push(channelsQueryState.queryInProgress);
+      return children;
+    };
+
+    const ChannelListMessengerPropsInterceptor = (props) => {
+      channelListMessengerLoadingHistory.push(props.loading);
+      return <ChannelListMessenger {...props} />;
+    };
+
+    await act(() => {
+      render(
+        <Chat client={chatClient}>
+          <QueryStateInterceptor>
+            <ChannelList List={ChannelListMessengerPropsInterceptor} />
+          </QueryStateInterceptor>
+        </Chat>,
+      );
+    });
+
+    expect(channelsQueryStatesHistory).toHaveLength(3);
+    expect(channelListMessengerLoadingHistory).toHaveLength(3);
+    expect(channelsQueryStatesHistory[0]).toBe('uninitialized');
+    expect(channelListMessengerLoadingHistory[0]).toBe(true);
+    expect(channelsQueryStatesHistory[1]).toBe('reload');
+    expect(channelListMessengerLoadingHistory[1]).toBe(true);
+    expect(channelsQueryStatesHistory[2]).toBeNull();
+    expect(channelListMessengerLoadingHistory[2]).toBe(false);
+  });
+
   it('ChannelPreview UI components should render `Avatar` when the custom prop is provided', async () => {
     useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
 

src/components/Chat/hooks/useChannelsQueryState.ts

@@ -1,18 +1,22 @@
 import { Dispatch, SetStateAction, useState } from 'react';
 import type { APIErrorResponse, ErrorFromResponse } from 'stream-chat';
 
-type ChannelQueryType = 'reload' | 'load-more';
+type ChannelQueryState =
+  | 'uninitialized' // the initial state before the first channels query is trigerred
+  | 'reload' // the initial channels query (loading the first page) is in progress
+  | 'load-more' // loading the next page of channels
+  | null; // at least one channels page has been loaded and there is no query in progress at the moment
 
 export interface ChannelsQueryState {
   error: ErrorFromResponse<APIErrorResponse> | null;
-  queryInProgress: ChannelQueryType | null;
+  queryInProgress: ChannelQueryState | null;
   setError: Dispatch<SetStateAction<ErrorFromResponse<APIErrorResponse> | null>>;
-  setQueryInProgress: Dispatch<SetStateAction<ChannelQueryType | null>>;
+  setQueryInProgress: Dispatch<SetStateAction<ChannelQueryState | null>>;
 }
 
 export const useChannelsQueryState = (): ChannelsQueryState => {
   const [error, setError] = useState<ErrorFromResponse<APIErrorResponse> | null>(null);
-  const [queryInProgress, setQueryInProgress] = useState<ChannelQueryType | null>(null);
+  const [queryInProgress, setQueryInProgress] = useState<ChannelQueryState>('uninitialized');
 
   return {
     error,