zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Improve account switcher pending state (#3827)

Browse source 
* Protect against races

* Reduce UI jank when switching accounts

* Add pending state to selected account

* Disable presses while pending
This commit is contained in:
dan 2024-05-02 21:55:50 +01:00 • committed by GitHub
parent 8ba1b10ce0
commit b86c3b486f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 105 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/AccountList.tsx
View file

@ -16,12 +16,12 @@ export function AccountList({
onSelectAccount,
onSelectOther,
otherLabel,
isSwitchingAccounts,
pendingDid,
}: {
onSelectAccount: (account: SessionAccount) => void
onSelectOther: () => void
otherLabel?: string
isSwitchingAccounts: boolean
pendingDid: string | null
}) {
const {currentAccount, accounts} = useSession()
const t = useTheme()
@ -33,6 +33,7 @@ export function AccountList({
return (
<View
pointerEvents={pendingDid ? 'none' : 'auto'}
style={[
a.rounded_md,
a.overflow_hidden,
@ -45,6 +46,7 @@ export function AccountList({
account={account}
onSelect={onSelectAccount}
isCurrentAccount={account.did === currentAccount?.did}
isPendingAccount={account.did === pendingDid}
/>
<View style={[a.border_b, t.atoms.border_contrast_low]} />
</React.Fragment>
@ -52,7 +54,7 @@ export function AccountList({
<Button
testID="chooseAddAccountBtn"
style={[a.flex_1]}
onPress={isSwitchingAccounts ? undefined : onPressAddAccount}
onPress={pendingDid ? undefined : onPressAddAccount}
label={_(msg`Login to account that is not listed`)}>
{({hovered, pressed}) => (
<View
@ -61,8 +63,7 @@ export function AccountList({
a.flex_row,
a.align_center,
{height: 48},
(hovered || pressed || isSwitchingAccounts) &&
t.atoms.bg_contrast_25,
(hovered || pressed) && t.atoms.bg_contrast_25,
]}>
<Text
style={[
@ -86,10 +87,12 @@ function AccountItem({
account,
onSelect,
isCurrentAccount,
isPendingAccount,
}: {
account: SessionAccount
onSelect: (account: SessionAccount) => void
isCurrentAccount: boolean
isPendingAccount: boolean
}) {
const t = useTheme()
const {_} = useLingui()
@ -117,7 +120,7 @@ function AccountItem({
a.flex_row,
a.align_center,
{height: 48},
(hovered || pressed) && t.atoms.bg_contrast_25,
(hovered || pressed || isPendingAccount) && t.atoms.bg_contrast_25,
]}>
<View style={a.p_md}>
<UserAvatar avatar={profile?.avatar} size={24} />

4
src/components/dialogs/SwitchAccount.tsx
View file

@ -18,7 +18,7 @@ export function SwitchAccountDialog({
}) {
const {_} = useLingui()
const {currentAccount} = useSession()
const {onPressSwitchAccount, isSwitchingAccounts} = useAccountSwitcher()
const {onPressSwitchAccount, pendingDid} = useAccountSwitcher()
const {setShowLoggedOut} = useLoggedOutViewControls()
const onSelectAccount = useCallback(
@ -54,7 +54,7 @@ export function SwitchAccountDialog({
onSelectAccount={onSelectAccount}
onSelectOther={onPressAddAccount}
otherLabel={_(msg`Add account`)}
isSwitchingAccounts={isSwitchingAccounts}
pendingDid={pendingDid}
/>
</View>
</Dialog.ScrollableInner>