diff --git a/native/avatars/edit-user-avatar.react.js b/native/avatars/edit-user-avatar.react.js --- a/native/avatars/edit-user-avatar.react.js +++ b/native/avatars/edit-user-avatar.react.js @@ -1,7 +1,7 @@ // @flow import * as React from 'react'; -import { TouchableOpacity } from 'react-native'; +import { ActivityIndicator, TouchableOpacity, View } from 'react-native'; import { useRemoveUserAvatar, @@ -10,6 +10,7 @@ } from './avatar-hooks.js'; import EditAvatarBadge from './edit-avatar-badge.react.js'; import UserAvatar from './user-avatar.react.js'; +import { useStyles } from '../themes/colors.js'; type Props = { +userID: ?string, @@ -17,12 +18,16 @@ +disabled?: boolean, }; function EditUserAvatar(props: Props): React.Node { + const styles = useStyles(unboundStyles); const { userID, onPressEmojiAvatarFlow, disabled } = props; - const [selectFromGalleryAndUpdateUserAvatar] = + const [selectFromGalleryAndUpdateUserAvatar, isGalleryAvatarUpdateLoading] = useSelectFromGalleryAndUpdateUserAvatar(); - const [removeUserAvatar] = useRemoveUserAvatar(); + const [removeUserAvatar, isRemoveAvatarUpdateLoading] = useRemoveUserAvatar(); + + const isAvatarUpdateInProgress = + isGalleryAvatarUpdateLoading || isRemoveAvatarUpdateLoading; const actionSheetConfig = React.useMemo( () => [ @@ -39,12 +44,34 @@ const showAvatarActionSheet = useShowAvatarActionSheet(actionSheetConfig); + let spinner; + if (isAvatarUpdateInProgress) { + spinner = ( + + + + ); + } + return ( + {spinner} {!disabled ? : null} ); } +const unboundStyles = { + spinnerContainer: { + position: 'absolute', + alignItems: 'center', + justifyContent: 'center', + top: 0, + bottom: 0, + left: 0, + right: 0, + }, +}; + export default EditUserAvatar;