fix: loading status should be handled in message list (#970)

## Description


https://github.com/sendbird/sendbird-uikit-react/blob/v3.10.0/src/modules/Channel/components/ChannelUI/index.tsx#L59-L67
Upon reviewing the `v3.10.0` code, I noticed that the actual loading of
the message list is handled in the **MessageList** component, while the
loading state displayed in the `ChannelUI` relies solely on a prop
called `isLoading`.

During the migration process in this area, a mistake was made.
I left a note indicating the purpose of this, as I'm unsure of its
intended use.

Additionally, due to the change in `isLoading` being optional, the
condition for `isInvalid` became invalid in the GroupChannel module.
Therefore, I added a separate fetch error to the context.


ticket: [CLNP-2259]

[CLNP-2259]:
https://sendbird.atlassian.net/browse/CLNP-2259?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: bang9

src/modules/Channel/components/ChannelUI/index.tsx

@@ -13,7 +13,7 @@ export interface ChannelUIProps extends GroupChannelUIBasicProps {
 
 const ChannelUI = (props: ChannelUIProps) => {
   const context = useChannelContext();
-  const { channelUrl, isInvalid, loading } = context;
+  const { channelUrl, isInvalid } = context;
 
   // Inject components to presentation layer
   const {
@@ -26,7 +26,7 @@ const ChannelUI = (props: ChannelUIProps) => {
     <GroupChannelUIView
       {...props}
       {...context}
-      loading={props?.isLoading ?? loading}
+      isLoading={props?.isLoading}
       isInvalid={isInvalid}
       channelUrl={channelUrl}
       renderChannelHeader={renderChannelHeader}

src/modules/GroupChannel/components/GroupChannelUI/GroupChannelUIView.tsx

@@ -37,7 +37,7 @@ export interface GroupChannelUIBasicProps {
 }
 
 export interface GroupChannelUIViewProps extends GroupChannelUIBasicProps {
-  loading: boolean;
+  isLoading?: boolean;
   isInvalid: boolean;
   channelUrl: string;
   renderChannelHeader: GroupChannelUIBasicProps['renderChannelHeader'];
@@ -47,7 +47,7 @@ export interface GroupChannelUIViewProps extends GroupChannelUIBasicProps {
 
 export const GroupChannelUIView = (props: GroupChannelUIViewProps) => {
   const {
-    loading,
+    isLoading,
     isInvalid,
     channelUrl,
     renderChannelHeader,
@@ -62,7 +62,9 @@ export const GroupChannelUIView = (props: GroupChannelUIViewProps) => {
   const sdkError = stores?.sdkStore?.error;
   const { logger, isOnline } = config;
 
-  if (loading) {
+  // Note: This is not a loading status of the message list.
+  //  It is just for custom props from the Channel module and is not used in the GroupChannel module. (We should remove this in v4)
+  if (isLoading) {
     return <div className="sendbird-conversation">{renderPlaceholderLoader?.() || <PlaceHolder type={PlaceHolderTypes.LOADING} />}</div>;
   }
 

src/modules/GroupChannel/components/GroupChannelUI/index.tsx

@@ -11,7 +11,7 @@ export interface GroupChannelUIProps extends GroupChannelUIBasicProps {}
 
 export const GroupChannelUI = (props: GroupChannelUIProps) => {
   const context = useGroupChannelContext();
-  const { currentChannel, channelUrl, loading } = context;
+  const { channelUrl, fetchChannelError } = context;
 
   // Inject components to presentation layer
   const {
@@ -24,8 +24,7 @@ export const GroupChannelUI = (props: GroupChannelUIProps) => {
     <GroupChannelUIView
       {...props}
       {...context}
-      loading={loading}
-      isInvalid={channelUrl && !currentChannel}
+      isInvalid={fetchChannelError !== null}
       channelUrl={channelUrl}
       renderChannelHeader={renderChannelHeader}
       renderMessageList={renderMessageList}

src/modules/GroupChannel/context/GroupChannelProvider.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import type { User } from '@sendbird/chat';
+import type { SendbirdError, User } from '@sendbird/chat';
 import {
   FileMessageCreateParams,
   MultipleFilesMessageCreateParams,
@@ -76,6 +76,7 @@ interface ContextBaseType {
 
 export interface GroupChannelContextType extends ContextBaseType, MessageListDataSourceWithoutActions, MessageActions {
   currentChannel: GroupChannel | null;
+  fetchChannelError: SendbirdError | null;
   nicknamesMap: Map<string, string>;
 
   scrollRef: React.MutableRefObject<HTMLDivElement>;
@@ -141,6 +142,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
   const [quoteMessage, setQuoteMessage] = useState<SendableMessageType>(null);
   const [animatedMessageId, setAnimatedMessageId] = useState(0);
   const [currentChannel, setCurrentChannel] = useState<GroupChannel | null>(null);
+  const [fetchChannelError, setFetchChannelError] = useState<SendbirdError>(null);
 
   // Ref
   const { scrollRef, scrollPubSub, scrollDistanceFromBottomRef, isScrollBottomReached, setIsScrollBottomReached } = useMessageListScroll();
@@ -180,8 +182,14 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
         scrollPubSub.publish('scrollToBottom', null);
       }
     },
-    onChannelDeleted: () => setCurrentChannel(null),
-    onCurrentUserBanned: () => setCurrentChannel(null),
+    onChannelDeleted: () => {
+      setCurrentChannel(null);
+      setFetchChannelError(null);
+    },
+    onCurrentUserBanned: () => {
+      setCurrentChannel(null);
+      setFetchChannelError(null);
+    },
     onChannelUpdated: (channel) => setCurrentChannel(channel),
     logger: config.logger,
   });
@@ -244,8 +252,10 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
       try {
         const channel = await sdkStore.sdk.groupChannel.getChannel(channelUrl);
         setCurrentChannel(channel);
-      } catch {
+        setFetchChannelError(null);
+      } catch (error) {
         setCurrentChannel(null);
+        setFetchChannelError(error);
       } finally {
         // Reset states when channel changes
         setQuoteMessage(null);
@@ -390,6 +400,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
 
         // Internal Interface
         currentChannel,
+        fetchChannelError,
         nicknamesMap,
 
         scrollRef,