From 0ac77b9ab7ab8feb7bb3c963af1b89a9b79728e1 Mon Sep 17 00:00:00 2001
From: Irene Ryu <irene.ryu@sendbird.com>
Date: Mon, 8 Jan 2024 14:00:57 +0900
Subject: [PATCH] Add missing profile url image prop

---
 src/components/CustomChannelComponent.tsx | 2 ++
 src/components/CustomMessage.tsx          | 6 ++++--
 src/components/PendingMessage.tsx         | 8 ++++++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/CustomChannelComponent.tsx b/src/components/CustomChannelComponent.tsx
index 149a34bf6..6fb7645c3 100644
--- a/src/components/CustomChannelComponent.tsx
+++ b/src/components/CustomChannelComponent.tsx
@@ -14,6 +14,7 @@ import ChatBottom from './ChatBottom';
 import CustomChannelHeader from './CustomChannelHeader';
 import CustomMessage from './CustomMessage';
 import DynamicRepliesPanel from './DynamicRepliesPanel';
+import LoadingScreen from './LoadingScreen';
 import { useConstantState } from '../context/ConstantContext';
 import { useScrollOnStreaming } from '../hooks/useScrollOnStreaming';
 import { isSpecialMessage, scrollUtil } from '../utils';
@@ -232,6 +233,7 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
           );
         }}
         renderTypingIndicator={() => <></>}
+        renderPlaceholderLoader={() => <LoadingScreen />}
       />
       <Banner />
     </Root>
diff --git a/src/components/CustomMessage.tsx b/src/components/CustomMessage.tsx
index 250117218..f924e6249 100644
--- a/src/components/CustomMessage.tsx
+++ b/src/components/CustomMessage.tsx
@@ -75,7 +75,9 @@ export default function CustomMessage(props: Props) {
     return (
       <div>
         {<CurrentUserMessage message={message as UserMessage} />}
-        {activeSpinnerId === message.messageId && <PendingMessage />}
+        {activeSpinnerId === message.messageId && (
+          <PendingMessage botProfileUrl={botUser?.profileUrl} />
+        )}
       </div>
     );
   }
@@ -100,7 +102,7 @@ export default function CustomMessage(props: Props) {
   }
 
   // Sent by bot
-  // suggested message
+  // for static suggested replies
   if (!isNotLocalMessageCustomType(message.customType)) {
     if (message.customType === LOCAL_MESSAGE_CUSTOM_TYPE.linkSuggestion) {
       return (
diff --git a/src/components/PendingMessage.tsx b/src/components/PendingMessage.tsx
index 415b3cf31..be4e7a5da 100644
--- a/src/components/PendingMessage.tsx
+++ b/src/components/PendingMessage.tsx
@@ -14,12 +14,16 @@ const ImageContainer = styled.div`
   width: 40px;
 `;
 
-export default function PendingMessage() {
+export default function PendingMessage({
+  botProfileUrl,
+}: {
+  botProfileUrl?: string;
+}) {
   return (
     <Container>
       <ImageContainer>
         <img
-          src={profileImage}
+          src={botProfileUrl || profileImage}
           alt="profileImage"
           style={{
             height: '28px',