fix: broken CSS in the ParentMessageInfo component (#1204)

#### Changelog
* Fixed broken CSS in Thread:
* Style was not applied to `ParentMessageInfo` until the first message
was received on the thread list.
  * Scroll functionality was not working on the thread list.

#### Fix
* Use `channelState`, `parentMessageState` and `threadListState` to
calculate the loading status in `useMessageLayoutDirection`
* Fix typo for className

Author: HoonBaek

src/modules/Thread/components/ParentMessageInfo/ParentMessageInfoItem.scss

@@ -80,7 +80,7 @@
   width: 56px;
 }
 
-.sendbird-parent-message-info-item__thumbnail-message__image-cover {;
+.sendbird-parent-message-info-item__thumbnail-message__image-cover {
   background-color: var(--sendbird-light-overlay-01);
   border-radius: 16px;
   display: none;

src/modules/Thread/components/ThreadUI/index.tsx

@@ -149,7 +149,7 @@ const ThreadUI: React.FC<ThreadUIProps> = ({
         )
       }
       <div
-        className={classnames('sendbird-thread-ui--scroll, sendbird-conversation__messages')}
+        className={classnames('sendbird-thread-ui--scroll', 'sendbird-conversation__messages')}
         ref={scrollRef}
         onScroll={onScroll}
       >

src/modules/Thread/context/ThreadProvider.tsx

@@ -16,6 +16,7 @@ import threadReducer from './dux/reducer';
 import { ThreadContextActionTypes } from './dux/actionTypes';
 import threadInitialState, { ThreadContextInitialState } from './dux/initialState';
 
+import type { OnBeforeDownloadFileMessageType } from '../../GroupChannel/context/GroupChannelProvider';
 import useGetChannel from './hooks/useGetChannel';
 import useGetAllEmoji from './hooks/useGetAllEmoji';
 import useGetParentMessage from './hooks/useGetParentMessage';
@@ -31,8 +32,8 @@ import useSendVoiceMessageCallback from './hooks/useSendVoiceMessageCallback';
 import { PublishingModuleType, useSendMultipleFilesMessage } from './hooks/useSendMultipleFilesMessage';
 import { SendableMessageType } from '../../../utils';
 import { useThreadFetchers } from './hooks/useThreadFetchers';
-import type { OnBeforeDownloadFileMessageType } from '../../GroupChannel/context/GroupChannelProvider';
 import { useMessageLayoutDirection } from '../../../hooks/useHTMLTextDirection';
+import { ChannelStateTypes, ParentMessageStateTypes, ThreadListStateTypes } from '../types';
 
 export interface ThreadProviderProps extends
   Pick<UserProfileProviderProps, 'disableUserProfile' | 'renderUserProfile'> {
@@ -165,8 +166,9 @@ export const ThreadProvider = (props: ThreadProviderProps) => {
   useMessageLayoutDirection(
     htmlTextDirection,
     forceLeftToRightMessageLayout,
-    // we're assuming that if the thread message list is empty, it's in the loading state
-    allThreadMessages.length === 0,
+    channelState === ChannelStateTypes.LOADING
+    || threadListState === ThreadListStateTypes.LOADING
+    || parentMessageState === ParentMessageStateTypes.LOADING,
   );
 
   const toggleReaction = useToggleReactionCallback({ currentChannel }, { logger });