added spinner to message bubble

src/screens/InAppScreens/MessagesScreen/ChatScreen/index.tsx

@@ -1288,7 +1288,7 @@ const ChatScreen = ({ route }: { route: any }) => {
           name: replyMessage.user._id === id ? userName : 'Me'
         };
       }
-      const message = { ...newMessages[0], pending: true };
+      const message = { ...newMessages[0], pending: true, isSending: true };
 
       setMessages((previousMessages) => GiftedChat.append(previousMessages ?? [], [message]));
 
@@ -1309,7 +1309,7 @@ const ChatScreen = ({ route }: { route: any }) => {
 
             setMessages((previousMessages) =>
               (previousMessages ?? []).map((msg) =>
-                msg._id === message._id ? { ...msg, _id: res.message_id } : msg
+                msg._id === message._id ? { ...msg, _id: res.message_id, isSending: false } : msg
               )
             );
             sendWebSocketMessage('new_message', newMessage as unknown as CustomMessage);
@@ -1491,6 +1491,18 @@ const ChatScreen = ({ route }: { route: any }) => {
   const renderTicks = (message: CustomMessage) => {
     if (message.user._id === id) return null;
 
+    if (message.isSending) {
+      return (
+        <View>
+          <ActivityIndicator
+            size={16}
+            color={Colors.LIGHT_GRAY}
+            style={{ transform: 'scale(0.8)' }}
+          />
+        </View>
+      );
+    }
+
     return message.received ? (
       <View>
         <MaterialCommunityIcons name="check-all" size={16} color={Colors.WHITE} />