forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
convo button skeleton (#4115)
authored by
Samuel Newman
and committed by
GitHub
cc7a0da1
492216a5
+50
-18
+50
-18
src/components/dms/MessageProfileButton.tsx
+50
-18
src/components/dms/MessageProfileButton.tsx
···
1
1
import React from 'react'
2
+
import {View} from 'react-native'
2
3
import {AppBskyActorDefs} from '@atproto/api'
3
4
import {msg} from '@lingui/macro'
4
5
import {useLingui} from '@lingui/react'
···
7
8
import {atoms as a, useTheme} from '#/alf'
8
9
import {Message_Stroke2_Corner0_Rounded as Message} from '../icons/Message'
9
10
import {Link} from '../Link'
11
+
import {canBeMessaged} from './util'
10
12
11
13
export function MessageProfileButton({
12
14
profile,
···
16
18
const {_} = useLingui()
17
19
const t = useTheme()
18
20
19
-
const {data: convoId} = useMaybeConvoForUser(profile.did)
21
+
const {data: convoId, isPending} = useMaybeConvoForUser(profile.did)
20
22
21
-
if (!convoId) return null
23
+
if (isPending) {
24
+
// show pending state based on declaration
25
+
if (canBeMessaged(profile)) {
26
+
return (
27
+
<View
28
+
testID="dmBtnLoading"
29
+
aria-hidden={true}
30
+
style={[
31
+
a.justify_center,
32
+
a.align_center,
33
+
t.atoms.bg_contrast_25,
34
+
a.rounded_full,
35
+
{width: 36, height: 36},
36
+
]}>
37
+
<Message
38
+
style={[
39
+
t.atoms.text,
40
+
{marginLeft: 1, marginBottom: 1, opacity: 0.3},
41
+
]}
42
+
size="md"
43
+
/>
44
+
</View>
45
+
)
46
+
} else {
47
+
return null
48
+
}
49
+
}
22
50
23
-
return (
24
-
<Link
25
-
testID="dmBtn"
26
-
size="small"
27
-
color="secondary"
28
-
variant="solid"
29
-
shape="round"
30
-
label={_(msg`Message ${profile.handle}`)}
31
-
to={`/messages/${convoId}`}
32
-
style={[a.justify_center, {width: 36, height: 36}]}>
33
-
<Message
34
-
style={[t.atoms.text, {marginLeft: 1, marginBottom: 1}]}
35
-
size="md"
36
-
/>
37
-
</Link>
38
-
)
51
+
if (convoId) {
52
+
return (
53
+
<Link
54
+
testID="dmBtn"
55
+
size="small"
56
+
color="secondary"
57
+
variant="solid"
58
+
shape="round"
59
+
label={_(msg`Message ${profile.handle}`)}
60
+
to={`/messages/${convoId}`}
61
+
style={[a.justify_center, {width: 36, height: 36}]}>
62
+
<Message
63
+
style={[t.atoms.text, {marginLeft: 1, marginBottom: 1}]}
64
+
size="md"
65
+
/>
66
+
</Link>
67
+
)
68
+
} else {
69
+
return null
70
+
}
39
71
}