add loading tests and refactor MessageList

Author: Dan Carbonell

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Text, View } from 'react-native';
 import { cleanup, render, waitFor } from '@testing-library/react-native';
 
 import { getOrCreateChannelApi } from 'mock-builders/api/getOrCreateChannel';
@@ -20,11 +19,6 @@ const Component = ({ channels, error = false, loadingChannels = false }) => (
       channels={channels}
       error={error}
       loadingChannels={loadingChannels}
-      LoadingIndicator={() => (
-        <View testID='loading-indicator'>
-          <Text>Loading Indicator</Text>
-        </View>
-      )}
     />
   </Chat>
 );
@@ -74,7 +68,7 @@ describe('ChannelListMessenger', () => {
       <Component channels={[]} loadingChannels={true} />,
     );
     await waitFor(() => {
-      expect(getByTestId('loading-indicator')).toBeTruthy();
+      expect(getByTestId('loading')).toBeTruthy();
     });
   });
 });

src/components/MessageList/MessageList.tsx

@@ -285,6 +285,16 @@ export const MessageList = <
   );
   const [newMessagesNotification, setNewMessageNotification] = useState(false);
 
+  /**
+   * In order to prevent the LoadingIndicator component from showing up briefly on mount,
+   * we set the loading state one cycle behind to ensure the messages are set before the
+   * change to the loading state is registered.
+   */
+  const [messagesLoading, setMessagesLoading] = useState(false);
+  useEffect(() => {
+    setMessagesLoading(!!loading);
+  }, [loading]);
+
   useEffect(() => {
     const currentLastMessage = getLastReceivedMessage(messageList);
     if (currentLastMessage) {
@@ -378,8 +388,10 @@ export const MessageList = <
   // We can't provide ListEmptyComponent to FlatList when inverted flag is set.
   // https://github.com/facebook/react-native/issues/21196
   if (messageList.length === 0 && !threadList) {
-    return (
-      <View style={{ flex: 1 }}>
+    return messagesLoading ? (
+      <LoadingIndicator listType='message' />
+    ) : (
+      <View style={{ flex: 1 }} testID='empty-state'>
         <EmptyStateIndicator listType='message' />
       </View>
     );
@@ -398,9 +410,6 @@ export const MessageList = <
           inverted
           keyboardShouldPersistTaps='always'
           keyExtractor={keyExtractor}
-          ListEmptyComponent={
-            loading ? <LoadingIndicator listType='message' /> : null
-          }
           ListFooterComponent={HeaderComponent}
           maintainVisibleContentPosition={{
             autoscrollToTopThreshold: 10,

src/components/MessageList/__tests__/MessageList.test.js

@@ -129,6 +129,31 @@ describe('MessageList', () => {
     });
   });
 
+  it('should render the EmptyStateIndicator when no messages loaded', async () => {
+    const user1 = generateUser();
+    const mockedChannel = generateChannel({
+      members: [generateMember({ user: user1 })],
+      messages: [],
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.query();
+
+    const { getByTestId } = render(
+      <Chat client={chatClient}>
+        <Channel channel={channel}>
+          <MessageList />
+        </Channel>
+      </Chat>,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('empty-state')).toBeTruthy();
+    });
+  });
+
   it('should render the is offline error', async () => {
     const user1 = generateUser();
     const mockedChannel = generateChannel({