feat: Added pending & failed message

src/components/CurrentUserMessage.tsx

@@ -1,9 +1,10 @@
+import { styled } from '@linaria/react';
 import { UserMessage } from '@sendbird/chat/message';
-import styled from 'styled-components';
+import { useTheme } from 'styled-components';
 
-import { DefaultSentTime, BodyContainer, BodyComponent } from './MessageComponent';
+import { BodyContainer, BodyComponent } from './MessageComponent';
+import MyMessageStatus from './MyMessageStatus';
 import { useConstantState } from '../context/ConstantContext';
-import { formatCreatedAtToAMPM } from '../utils/messageTimestamp';
 
 const Root = styled.div<{ enableEmojiFeedback: boolean }>`
   display: flex;
@@ -18,11 +19,13 @@ type Props = {
 
 export default function CurrentUserMessage(props: Props) {
   const { enableEmojiFeedback, dateLocale } = useConstantState();
+  const theme = useTheme();
+
   const { message } = props;
 
   return (
     <Root enableEmojiFeedback={enableEmojiFeedback}>
-      <DefaultSentTime>{formatCreatedAtToAMPM(message.createdAt, dateLocale)}</DefaultSentTime>
+      <MyMessageStatus message={message} dateLocale={dateLocale} theme={theme} />
       <BodyContainer>
         <BodyComponent>
           <div className="sendbird-word">{message.message}</div>

src/components/LoadingScreen.tsx

@@ -9,7 +9,7 @@ const spinner = keyframes`
   100% {
     transform: rotate(360deg);
   }
-}`;
+`;
 
 const Container = styled.div`
   width: 100%;

src/components/MyMessageStatus.tsx

@@ -0,0 +1,49 @@
+import { css } from '@linaria/core';
+import { SendableMessage } from '@sendbird/chat/lib/__definition';
+import { SendingStatus } from '@sendbird/chat/message';
+import { Locale } from 'date-fns';
+import { useTheme } from 'styled-components';
+
+import { DefaultSentTime } from './MessageComponent';
+import { Icon } from '../foundation/components/Icon';
+import { Loader } from '../foundation/components/Loader';
+import { CommonTheme } from '../theme';
+import { formatCreatedAtToAMPM } from '../utils/messageTimestamp';
+
+interface MyMessageStatusProps {
+  message: SendableMessage;
+  dateLocale: Locale;
+  theme: CommonTheme;
+}
+
+export default function MyMessageStatus(props: MyMessageStatusProps) {
+  const { message, dateLocale } = props;
+  const theme = useTheme();
+
+  switch (message.sendingStatus) {
+    case SendingStatus.PENDING:
+      return (
+        <Loader className={sendbirdLoader} size={16}>
+          <Icon type={'spinner'} color={theme.bgColor.outgoingMessage} size={16} />
+        </Loader>
+      );
+    case SendingStatus.FAILED:
+      return (
+        <div
+          style={{
+            display: 'inline-block',
+            width: '16px',
+            height: '16px',
+          }}
+        >
+          <Icon type={'error'} color={'error'} size={16} />
+        </div>
+      );
+    default:
+      return <DefaultSentTime>{formatCreatedAtToAMPM(message.createdAt, dateLocale)}</DefaultSentTime>;
+  }
+}
+
+const sendbirdLoader = css`
+  margin-bottom: 2px;
+`;

src/components/messages/OutgoingFileMessage.tsx

@@ -2,14 +2,15 @@ import { css } from '@linaria/core';
 import { styled } from '@linaria/react';
 import { FileMessage } from '@sendbird/chat/message';
 import { useState } from 'react';
+import { useTheme } from 'styled-components';
 
 import { useConstantState } from '../../context/ConstantContext';
 import { Icon } from '../../foundation/components/Icon';
 import { Label } from '../../foundation/components/Label';
 import { Loader } from '../../foundation/components/Loader';
 import { META_ARRAY_ASPECT_RATIO_KEY } from '../../utils/getImageAspectRatio';
-import { formatCreatedAtToAMPM } from '../../utils/messageTimestamp';
-import { BodyComponent, BodyContainer, DefaultSentTime } from '../MessageComponent';
+import { BodyComponent, BodyContainer } from '../MessageComponent';
+import MyMessageStatus from '../MyMessageStatus';
 import { FileViewer } from '../ui/FileViewer';
 
 type Props = {
@@ -18,6 +19,7 @@ type Props = {
 
 export const OutgoingFileMessage = ({ message }: Props) => {
   const { dateLocale } = useConstantState();
+  const theme = useTheme();
 
   const hasMessageBubble = !!message.message;
   const type = (() => {
@@ -36,7 +38,7 @@ export const OutgoingFileMessage = ({ message }: Props) => {
   const renderTimestamp = () => {
     return (
       <div className={timestampContainer}>
-        <DefaultSentTime>{formatCreatedAtToAMPM(message.createdAt, dateLocale)}</DefaultSentTime>
+        <MyMessageStatus message={message} dateLocale={dateLocale} theme={theme} />
       </div>
     );
   };

src/foundation/components/Loader/index.tsx

@@ -18,7 +18,7 @@ export const Loader = ({ className, children, size = 26, testId = 'sendbird-load
   );
 };
 
-const Container = styled.div<{ size: string | number }>`
+export const Container = styled.div<{ size: string | number }>`
   display: inline-block;
   animation: 1s infinite linear;
   animation-name: rotate;