Merge pull request #74 from sendbird/feat/profile-url-prop

Add missing profile url image prop
sendbird · Jan 9, 2024 · 9ebeb63 · 9ebeb63
2 parents e7782b9 + 0ac77b9
commit 9ebeb63
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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',