Bluesky app fork with some witchin' additions 💫
[Clipclops] Pending message style with layout animation (#3844)
* decrease group gap to 3 mins
* pending style with layout animation
* make pending state lighter
authored by
Samuel Newman
and committed by
GitHub
6a4199fe
55f3df55
+23
-7
+16
-6
src/components/dms/MessageItem.tsx
+16
-6
src/components/dms/MessageItem.tsx
···
1
-
import React, {useCallback, useMemo} from 'react'
2
-
import {StyleProp, TextStyle, View} from 'react-native'
1
+
import React, {useCallback, useMemo, useRef} from 'react'
2
+
import {LayoutAnimation, StyleProp, TextStyle, View} from 'react-native'
3
3
import {ChatBskyConvoDefs} from '@atproto-labs/api'
4
4
import {msg} from '@lingui/macro'
5
5
import {useLingui} from '@lingui/react'
···
13
13
export function MessageItem({
14
14
item,
15
15
next,
16
+
pending,
16
17
}: {
17
18
item: ChatBskyConvoDefs.MessageView
18
19
next:
19
20
| ChatBskyConvoDefs.MessageView
20
21
| ChatBskyConvoDefs.DeletedMessageView
21
22
| null
23
+
pending?: boolean
22
24
}) {
23
25
const t = useTheme()
24
26
const {currentAccount} = useSession()
···
35
37
return true
36
38
}
37
39
38
-
// or, if there's a 10 minute gap between this message and the next
40
+
// or, if there's a 3 minute gap between this message and the next
39
41
if (ChatBskyConvoDefs.isMessageView(next)) {
40
42
const thisDate = new Date(item.sentAt)
41
43
const nextDate = new Date(next.sentAt)
42
44
43
45
const diff = nextDate.getTime() - thisDate.getTime()
44
46
45
-
// 10 minutes
46
-
return diff > 10 * 60 * 1000
47
+
// 3 minutes
48
+
return diff > 3 * 60 * 1000
47
49
}
48
50
49
51
return true
50
52
}, [item, next, isFromSelf, isNextFromSelf])
51
53
54
+
const lastInGroupRef = useRef(isLastInGroup)
55
+
if (lastInGroupRef.current !== isLastInGroup) {
56
+
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
57
+
lastInGroupRef.current = isLastInGroup
58
+
}
59
+
52
60
return (
53
61
<View>
54
62
<ActionsWrapper isFromSelf={isFromSelf} message={item}>
···
60
68
a.rounded_md,
61
69
{
62
70
backgroundColor: isFromSelf
63
-
? t.palette.primary_500
71
+
? pending
72
+
? t.palette.primary_200
73
+
: t.palette.primary_500
64
74
: t.palette.contrast_50,
65
75
borderRadius: 17,
66
76
},
+7
-1
src/screens/Messages/Conversation/MessagesList.tsx
+7
-1
src/screens/Messages/Conversation/MessagesList.tsx
···
57
57
58
58
function renderItem({item}: {item: ConvoItem}) {
59
59
if (item.type === 'message' || item.type === 'pending-message') {
60
-
return <MessageItem item={item.message} next={item.nextMessage} />
60
+
return (
61
+
<MessageItem
62
+
item={item.message}
63
+
next={item.nextMessage}
64
+
pending={item.type === 'pending-message'}
65
+
/>
66
+
)
61
67
} else if (item.type === 'deleted-message') {
62
68
return <Text>Deleted message</Text>
63
69
} else if (item.type === 'pending-retry') {