[Clipclops] Pending message style with layout animation (#3844)

* decrease group gap to 3 mins

* pending style with layout animation

* make pending state lighter

2 files changed, 23 insertions, 7 deletions

diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx
index a449c6ed1..a8393c742 100644
--- a/src/components/dms/MessageItem.tsx
+++ b/src/components/dms/MessageItem.tsx
@@ -1,5 +1,5 @@
-import React, {useCallback, useMemo} from 'react'
-import {StyleProp, TextStyle, View} from 'react-native'
+import React, {useCallback, useMemo, useRef} from 'react'
+import {LayoutAnimation, StyleProp, TextStyle, View} from 'react-native'
 import {ChatBskyConvoDefs} from '@atproto-labs/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -13,12 +13,14 @@ import {Text} from '#/components/Typography'
 export function MessageItem({
   item,
   next,
+  pending,
 }: {
   item: ChatBskyConvoDefs.MessageView
   next:
     | ChatBskyConvoDefs.MessageView
     | ChatBskyConvoDefs.DeletedMessageView
     | null
+  pending?: boolean
 }) {
   const t = useTheme()
   const {currentAccount} = useSession()
@@ -35,20 +37,26 @@ export function MessageItem({
       return true
     }
 
-    // or, if there's a 10 minute gap between this message and the next
+    // or, if there's a 3 minute gap between this message and the next
     if (ChatBskyConvoDefs.isMessageView(next)) {
       const thisDate = new Date(item.sentAt)
       const nextDate = new Date(next.sentAt)
 
       const diff = nextDate.getTime() - thisDate.getTime()
 
-      // 10 minutes
-      return diff > 10 * 60 * 1000
+      // 3 minutes
+      return diff > 3 * 60 * 1000
     }
 
     return true
   }, [item, next, isFromSelf, isNextFromSelf])
 
+  const lastInGroupRef = useRef(isLastInGroup)
+  if (lastInGroupRef.current !== isLastInGroup) {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+    lastInGroupRef.current = isLastInGroup
+  }
+
   return (
     <View>
       <ActionsWrapper isFromSelf={isFromSelf} message={item}>
@@ -60,7 +68,9 @@ export function MessageItem({
             a.rounded_md,
             {
               backgroundColor: isFromSelf
-                ? t.palette.primary_500
+                ? pending
+                  ? t.palette.primary_200
+                  : t.palette.primary_500
                 : t.palette.contrast_50,
               borderRadius: 17,
             },
diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx
index e011721e1..28cc48776 100644
--- a/src/screens/Messages/Conversation/MessagesList.tsx
+++ b/src/screens/Messages/Conversation/MessagesList.tsx
@@ -57,7 +57,13 @@ function RetryButton({onPress}: {onPress: () => unknown}) {
 
 function renderItem({item}: {item: ConvoItem}) {
   if (item.type === 'message' || item.type === 'pending-message') {
-    return <MessageItem item={item.message} next={item.nextMessage} />
+    return (
+      <MessageItem
+        item={item.message}
+        next={item.nextMessage}
+        pending={item.type === 'pending-message'}
+      />
+    )
   } else if (item.type === 'deleted-message') {
     return <Text>Deleted message</Text>
   } else if (item.type === 'pending-retry') {