diff --git a/src/components/dms/MessageProfileButton.tsx b/src/components/dms/MessageProfileButton.tsx index 6f227de6..7e4422a6 100644 --- a/src/components/dms/MessageProfileButton.tsx +++ b/src/components/dms/MessageProfileButton.tsx @@ -1,4 +1,5 @@ import React from 'react' +import {View} from 'react-native' import {AppBskyActorDefs} from '@atproto/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -7,6 +8,7 @@ import {useMaybeConvoForUser} from '#/state/queries/messages/get-convo-for-membe import {atoms as a, useTheme} from '#/alf' import {Message_Stroke2_Corner0_Rounded as Message} from '../icons/Message' import {Link} from '../Link' +import {canBeMessaged} from './util' export function MessageProfileButton({ profile, @@ -16,24 +18,54 @@ export function MessageProfileButton({ const {_} = useLingui() const t = useTheme() - const {data: convoId} = useMaybeConvoForUser(profile.did) + const {data: convoId, isPending} = useMaybeConvoForUser(profile.did) - if (!convoId) return null + if (isPending) { + // show pending state based on declaration + if (canBeMessaged(profile)) { + return ( + <View + testID="dmBtnLoading" + aria-hidden={true} + style={[ + a.justify_center, + a.align_center, + t.atoms.bg_contrast_25, + a.rounded_full, + {width: 36, height: 36}, + ]}> + <Message + style={[ + t.atoms.text, + {marginLeft: 1, marginBottom: 1, opacity: 0.3}, + ]} + size="md" + /> + </View> + ) + } else { + return null + } + } - return ( - <Link - testID="dmBtn" - size="small" - color="secondary" - variant="solid" - shape="round" - label={_(msg`Message ${profile.handle}`)} - to={`/messages/${convoId}`} - style={[a.justify_center, {width: 36, height: 36}]}> - <Message - style={[t.atoms.text, {marginLeft: 1, marginBottom: 1}]} - size="md" - /> - </Link> - ) + if (convoId) { + return ( + <Link + testID="dmBtn" + size="small" + color="secondary" + variant="solid" + shape="round" + label={_(msg`Message ${profile.handle}`)} + to={`/messages/${convoId}`} + style={[a.justify_center, {width: 36, height: 36}]}> + <Message + style={[t.atoms.text, {marginLeft: 1, marginBottom: 1}]} + size="md" + /> + </Link> + ) + } else { + return null + } }