fix: prevent overriding active channel UI on ChannelList pagination error (#3164)

Author: MartinCupela

src/components/Channel/Channel.tsx

@@ -192,15 +192,15 @@ const UnMemoizedChannel = (props: PropsWithChildren<ChannelProps>) => {
     );
   }
 
-  if (channelsQueryState.error && LoadingErrorIndicator) {
+  if (channelsQueryState.error && !channel && LoadingErrorIndicator) {
     return (
       <ChannelContainer>
         <LoadingErrorIndicator error={channelsQueryState.error} />
       </ChannelContainer>
     );
   }
 
-  if (channelsQueryState.error) {
+  if (channelsQueryState.error && !channel) {
     return <ChannelContainer />;
   }
 

src/components/Channel/__tests__/Channel.test.tsx

@@ -380,7 +380,7 @@ describe('Channel', () => {
     await waitFor(() => expect(asFragment()).toMatchSnapshot());
   });
 
-  it('should render empty channel container if channels query failed', async () => {
+  it('should render empty channel container if channels query failed and no channel is available', async () => {
     const childrenContent = 'Channel children';
     const { asFragment } = render(
       <ChatProvider
@@ -399,6 +399,58 @@ describe('Channel', () => {
     await waitFor(() => expect(asFragment()).toMatchSnapshot());
   });
 
+  it('should render channel content if channels query failed but channel is available', async () => {
+    const childrenContent = 'Channel children';
+    await channel.watch();
+    render(
+      <ChatProvider
+        value={fromPartial<ChatContextValue>({
+          channelsQueryState: {
+            error: new Error('pagination failed'),
+            queryInProgress: null,
+            setError: vi.fn(),
+            setQueryInProgress: vi.fn(),
+          },
+          client: chatClient,
+          searchController: new SearchController(),
+        })}
+      >
+        <Channel channel={channel}>{childrenContent}</Channel>
+      </ChatProvider>,
+    );
+    await waitFor(() => expect(screen.getByText(childrenContent)).toBeInTheDocument());
+  });
+
+  it('should render channel content if channels query failed and channel is available even if LoadingErrorIndicator is provided', async () => {
+    const errMsg = 'Channels query failed';
+    const childrenContent = 'Channel children';
+    await channel.watch();
+    render(
+      <ChatProvider
+        value={fromPartial<ChatContextValue>({
+          channelsQueryState: {
+            error: new Error(errMsg),
+            queryInProgress: null,
+            setError: vi.fn(),
+            setQueryInProgress: vi.fn(),
+          },
+          client: chatClient,
+          searchController: new SearchController(),
+        })}
+      >
+        <WithComponents
+          overrides={{
+            LoadingErrorIndicator: ({ error }) => <div>{error.message}</div>,
+          }}
+        >
+          <Channel channel={channel}>{childrenContent}</Channel>
+        </WithComponents>
+      </ChatProvider>,
+    );
+    await waitFor(() => expect(screen.getByText(childrenContent)).toBeInTheDocument());
+    expect(screen.queryByText(errMsg)).not.toBeInTheDocument();
+  });
+
   it('should render provided loading indicator if channels query is in progress', async () => {
     const childrenContent = 'Channel children';
     const loadingText = 'Loading channels';

src/components/Channel/__tests__/__snapshots__/Channel.test.tsx.snap

@@ -50,7 +50,7 @@ exports[`Channel > should render empty channel container if channel does not hav
 </DocumentFragment>
 `;
 
-exports[`Channel > should render empty channel container if channels query failed 1`] = `
+exports[`Channel > should render empty channel container if channels query failed and no channel is available 1`] = `
 <DocumentFragment>
   <div
     class="str-chat str-chat__channel"