feat: add new props isLoading to ChannelUI (#350)

It is better to have separate prop to show loader in channel,
because, other customers might have used empty/null to show invalid channel
and it would be a breaking change for them

Usage:
```
<Channel channelUrl={currentChannelUrl} isLoading={!currentChannelUrl} />
```## External Contributions

Author: Sravan S

scripts/index_d_ts

@@ -469,6 +469,7 @@ declare module "SendbirdUIKitGlobal" {
   };
 
   export interface ChannelUIProps {
+    isLoading?: boolean;
     renderPlaceholderLoader?: () => React.ReactNode | React.ReactElement;
     renderPlaceholderInvalid?: () => React.ReactNode | React.ReactElement;
     renderPlaceholderEmpty?: () => React.ReactNode | React.ReactElement;

src/smart-components/Channel/components/ChannelUI/index.tsx

@@ -16,6 +16,7 @@ import { RenderCustomSeparatorProps, RenderMessageProps } from '../../../../type
 import * as messageActionTypes from '../../context/dux/actionTypes';
 
 export interface ChannelUIProps {
+  isLoading?: boolean;
   renderPlaceholderLoader?: () => React.ReactElement;
   renderPlaceholderInvalid?: () => React.ReactElement;
   renderPlaceholderEmpty?: () => React.ReactElement;
@@ -27,6 +28,7 @@ export interface ChannelUIProps {
 }
 
 const ChannelUI: React.FC<ChannelUIProps> = ({
+  isLoading,
   renderPlaceholderLoader,
   renderPlaceholderInvalid,
   renderPlaceholderEmpty,
@@ -59,6 +61,16 @@ const ChannelUI: React.FC<ChannelUIProps> = ({
   const logger = globalStore?.config?.logger;
   const isOnline = globalStore?.config?.isOnline;
 
+  if (isLoading) {
+    return (<div className="sendbird-conversation">
+      {
+        renderPlaceholderInvalid?.() || (
+          <PlaceHolder type={PlaceHolderTypes.LOADING} />
+        )
+      }
+    </div>);
+  }
+
   if (!channelUrl) {
     return (<div className="sendbird-conversation">
       {

src/smart-components/Channel/context/dux/__tests__/reducers.spec.js

@@ -17,6 +17,11 @@ describe('Messages-Reducers', () => {
     expect(nextState.loading).toEqual(true);
   });
 
+  // https://sendbird.atlassian.net/browse/UIKIT-2158
+  it('should check if ITNITAL_LOADING state is true', () => {
+    expect(initialState.loading).toEqual(true);
+  });
+
   it('should initialize messages FETCH_INITIAL_MESSAGES_SUCCESS', () => {
     const mockData = generateMockChannel();
     const nextState = reducers(stateWithCurrentChannel, {

src/smart-components/Channel/context/dux/initialState.js

@@ -1,6 +1,6 @@
 export default {
   initialized: false,
-  loading: false,
+  loading: true,
   allMessages: [],
   currentGroupChannel: { members: [] },
   // for scrollup

src/smart-components/Channel/index.tsx

@@ -30,6 +30,7 @@ const Channel: React.FC<ChannelProps> = (props: ChannelProps) => {
       disableMarkAsRead={props?.disableMarkAsRead}
     >
       <ChannelUI
+        isLoading={props?.isLoading}
         renderPlaceholderLoader={props?.renderPlaceholderLoader}
         renderPlaceholderInvalid={props?.renderPlaceholderInvalid}
         renderPlaceholderEmpty={props?.renderPlaceholderEmpty}

src/smart-components/ChannelList/components/ChannelListUI/index.tsx

@@ -159,7 +159,7 @@ const ChannelListUI: React.FC<ChannelListUIProps> = (props: ChannelListUIProps)
         }}
       >
         {
-          (sdkError) && (
+          (sdkError && !loading) && (
             (renderPlaceHolderError && typeof renderPlaceHolderError === 'function') ? (
               renderPlaceHolderError?.()
             ) : (

src/smart-components/ChannelList/dux/__tests__/reducers.spec.js

@@ -16,6 +16,11 @@ describe('Channels-Reducers', () => {
     expect(nextState.currentChannel.url).toEqual(mockData.allChannels[0].url);
   });
 
+    // https://sendbird.atlassian.net/browse/UIKIT-2158
+    it('should check if ITNITAL_LOADING state is true', () => {
+      expect(initialState.loading).toEqual(true);
+    });
+
   it('should handle create new channel using CREATE_CHANNEL', () => {
     const nextState = reducers(mockData, {
       type: actionTypes.CREATE_CHANNEL,

src/smart-components/ChannelList/dux/initialState.js

@@ -1,7 +1,7 @@
 export default {
   // we might not need this initialized state -> should remove
   initialized: false,
-  loading: false,
+  loading: true,
   allChannels: [],
   currentChannel: null,
   showSettings: false,