feat: Added pending & failed message (#363)

## Changes
- Added pending and failed messages

ticket: [AC-2609]

[Sign in to
Sendbird.webm](https://github.com/user-attachments/assets/d670a9ad-b006-448a-9157-56eceb0c7236)

## Additional Notes
- Tested with localCacheEnabled false, and message input disabled false

## Checklist
Before requesting a code review, please check the following:
- [x] **[Required]** CI has passed all checks.
- [x] **[Required]** A self-review has been conducted to ensure there
are no minor mistakes.
- [x] **[Required]** Unnecessary comments/debugging code have been
removed.
- [x] **[Required]** All requirements specified in the ticket have been
accurately implemented.
- [ ] Ensure the ticket has been updated with the sprint, status, and
story points.


[AC-2609]:
https://sendbird.atlassian.net/browse/AC-2609?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

Co-authored-by: Hyungu Kang | Airen <[email protected]>

src/components/CurrentUserMessage.tsx

@@ -1,9 +1,9 @@
+import { styled } from '@linaria/react';
 import { UserMessage } from '@sendbird/chat/message';
-import styled 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;
@@ -22,7 +22,7 @@ export default function CurrentUserMessage(props: Props) {
 
   return (
     <Root enableEmojiFeedback={enableEmojiFeedback}>
-      <DefaultSentTime>{formatCreatedAtToAMPM(message.createdAt, dateLocale)}</DefaultSentTime>
+      <MyMessageStatus message={message} dateLocale={dateLocale} />
       <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,43 @@
+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 { formatCreatedAtToAMPM } from '../utils/messageTimestamp';
+
+interface MyMessageStatusProps {
+  message: SendableMessage;
+  dateLocale: Locale;
+}
+
+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 className={sendbirdLoader}>
+          <Icon type={'error'} color={'error'} size={16} />
+        </div>
+      );
+    default:
+      return <DefaultSentTime>{formatCreatedAtToAMPM(message.createdAt, dateLocale)}</DefaultSentTime>;
+  }
+}
+
+const sendbirdLoader = css`
+  margin-bottom: 2px;
+  width: 16px;
+  height: 16px;
+`;

src/components/messages/OutgoingFileMessage.tsx

@@ -8,8 +8,8 @@ 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 = {
@@ -36,7 +36,7 @@ export const OutgoingFileMessage = ({ message }: Props) => {
   const renderTimestamp = () => {
     return (
       <div className={timestampContainer}>
-        <DefaultSentTime>{formatCreatedAtToAMPM(message.createdAt, dateLocale)}</DefaultSentTime>
+        <MyMessageStatus message={message} dateLocale={dateLocale} />
       </div>
     );
   };