From 8ab573c1e3b358219e71543110ae93617d61b917 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Mon, 4 May 2026 13:35:12 +0200
Subject: [PATCH] fix: prevent overriding active channel UI on ChannelList
 pagination error

---
 src/components/Channel/Channel.tsx            |  4 +-
 .../Channel/__tests__/Channel.test.tsx        | 54 ++++++++++++++++++-
 .../__snapshots__/Channel.test.tsx.snap       |  2 +-
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/src/components/Channel/Channel.tsx b/src/components/Channel/Channel.tsx
index e962dfd2e..4e9d8db41 100644
--- a/src/components/Channel/Channel.tsx
+++ b/src/components/Channel/Channel.tsx
@@ -192,7 +192,7 @@ const UnMemoizedChannel = (props: PropsWithChildren<ChannelProps>) => {
     );
   }
 
-  if (channelsQueryState.error && LoadingErrorIndicator) {
+  if (channelsQueryState.error && !channel && LoadingErrorIndicator) {
     return (
       <ChannelContainer>
         <LoadingErrorIndicator error={channelsQueryState.error} />
@@ -200,7 +200,7 @@ const UnMemoizedChannel = (props: PropsWithChildren<ChannelProps>) => {
     );
   }
 
-  if (channelsQueryState.error) {
+  if (channelsQueryState.error && !channel) {
     return <ChannelContainer />;
   }
 
diff --git a/src/components/Channel/__tests__/Channel.test.tsx b/src/components/Channel/__tests__/Channel.test.tsx
index ce720891d..1b80ef1d2 100644
--- a/src/components/Channel/__tests__/Channel.test.tsx
+++ b/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';
diff --git a/src/components/Channel/__tests__/__snapshots__/Channel.test.tsx.snap b/src/components/Channel/__tests__/__snapshots__/Channel.test.tsx.snap
index 7ddac5a25..8a9debd0b 100644
--- a/src/components/Channel/__tests__/__snapshots__/Channel.test.tsx.snap
+++ b/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"