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;