showing avatar upload indicator on avatar instead of using save indicator

src/components/avatarHeader/avatarHeaderView.js

@@ -16,6 +16,7 @@ const AvatarHeader = ({
   navigation,
   avatarUrl,
   showImageUploadActions,
+  isUploading,
 }) => (
   <LinearGradient
     start={{ x: 0, y: 0 }}
@@ -38,6 +39,7 @@ const AvatarHeader = ({
             noAction size="xl" 
             username={username} 
             avatarUrl={avatarUrl}
+            isLoading={isUploading}
           />
           <IconButton
             iconStyle={styles.addIcon}

src/components/profileEditForm/profileEditFormView.tsx

@@ -18,8 +18,20 @@ import { getResizedImage } from '../../utils/image';
 // Styles
 import styles from './profileEditFormStyles';
 
+
+interface ProfileEditFormProps {
+  coverUrl:string;
+  formData:any;
+  handleOnItemChange:()=>void;
+  handleOnSubmit:()=>void;
+  intl:any,
+  isDarkTheme:boolean,
+  isLoading:boolean,
+  isUploading:boolean,
+  showImageUploadActions:boolean,
+}
+
 const ProfileEditFormView = ({
-  avatarUrl,
   coverUrl,
   formData,
   handleOnItemChange,
@@ -29,7 +41,7 @@ const ProfileEditFormView = ({
   isLoading,
   showImageUploadActions,
   ...props
-}) => (
+}:ProfileEditFormProps) => (
   <View style={styles.container}>
     <IconButton
       iconStyle={styles.saveIcon}

src/components/userAvatar/view/userAvatarStyles.ts

@@ -6,4 +6,10 @@ export default EStyleSheet.create({
     borderColor: '$borderColor',
     backgroundColor: '$pureWhite',
   },
+  activityIndicator: {
+    position:'absolute', 
+    alignSelf:'center', 
+    top:0, 
+    bottom:0
+  }
 });

src/components/userAvatar/view/userAvatarView.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { TouchableOpacity, ViewStyle } from 'react-native';
+import { ActivityIndicator, TouchableOpacity, ViewStyle } from 'react-native';
 import { connect } from 'react-redux';
 
 import FastImage from 'react-native-fast-image';
@@ -12,6 +12,7 @@ import ROUTES from '../../../constants/routeNames';
 // Utils
 import { getResizedAvatar } from '../../../utils/image';
 import { useAppSelector } from '../../../hooks';
+import EStyleSheet from 'react-native-extended-stylesheet';
 
 const DEFAULT_IMAGE = require('../../../assets/avatar_default.png');
 
@@ -27,6 +28,7 @@ interface UserAvatarProps {
   style?:ViewStyle;
   disableSize?:boolean;
   noAction?:boolean;
+  isLoading?:boolean;
 }
 
 const UserAvatarView = ({
@@ -35,7 +37,8 @@ const UserAvatarView = ({
   size,
   style,
   disableSize,
-  noAction
+  noAction,
+  isLoading
 }:UserAvatarProps) => {
 
     const curUsername = useAppSelector(state=>state.account.currentAccount.name);
@@ -79,6 +82,15 @@ const UserAvatarView = ({
           ]}
           source={_avatar}
         />
+        {
+          isLoading && (
+            <ActivityIndicator 
+              style={styles.activityIndicator} 
+              size='large' 
+              color={EStyleSheet.value('$white')} 
+            />
+          )
+        }
       </TouchableOpacity>
     );
 }

src/containers/profileEditContainer.js

@@ -11,6 +11,7 @@ import { uploadImage } from '../providers/ecency/ecency';
 import { profileUpdate, signImage } from '../providers/hive/dhive';
 import { updateCurrentAccount } from '../redux/actions/accountAction';
 import { setAvatarCacheStamp } from '../redux/actions/uiAction';
+import { transferTypes } from '../utils/wallet';
 
 // import ROUTES from '../constants/routeNames';
 
@@ -51,6 +52,7 @@ class ProfileEditContainer extends Component {
     super(props);
     this.state = {
       isLoading: false,
+      isUploading: false,
       about: get(props.currentAccount, 'about.profile.about'),
       name: get(props.currentAccount, 'about.profile.name'),
       location: get(props.currentAccount, 'about.profile.location'),
@@ -71,14 +73,14 @@ class ProfileEditContainer extends Component {
   _uploadImage = async (media, action) => {
     const { intl, currentAccount, pinCode } = this.props;
 
-    this.setState({ isLoading: true });
+    this.setState({ isUploading: true });
 
     let sign = await signImage(media, currentAccount, pinCode);
 
     uploadImage(media, currentAccount.name, sign)
       .then((res) => {
         if (res.data && res.data.url) {
-          this.setState({ [action]: res.data.url, isLoading: false });
+          this.setState({ [action]: res.data.url, isUploading: false });
         }
       })
       .catch((error) => {
@@ -90,7 +92,7 @@ class ProfileEditContainer extends Component {
             error.message || error.toString(),
           );
         }
-        this.setState({ isLoading: false });
+        this.setState({ isUploading: false });
       });
   };
 
@@ -103,11 +105,9 @@ class ProfileEditContainer extends Component {
   };
 
   _handleOpenImagePicker = (action) => {
-    ImagePicker.openPicker({
-      includeBase64: true,
-    })
-      .then((image) => {
-        this._handleMediaOnSelected(image, action);
+    ImagePicker.openPicker(IMAGE_PICKER_OPTIONS)
+      .then((media) => {
+        this._uploadImage(media, action);
       })
       .catch((e) => {
         this._handleMediaOnSelectFailure(e);
@@ -115,22 +115,15 @@ class ProfileEditContainer extends Component {
   };
 
   _handleOpenCamera = (action) => {
-    ImagePicker.openCamera({
-      includeBase64: true,
-    })
-      .then((image) => {
-        this._handleMediaOnSelected(image, action);
+    ImagePicker.openCamera(IMAGE_PICKER_OPTIONS)
+      .then((media) => {
+        this._uploadImage(media, action);
       })
       .catch((e) => {
         this._handleMediaOnSelectFailure(e);
       });
   };
 
-  _handleMediaOnSelected = (media, action) => {
-    this.setState({ isLoading: true }, () => {
-      this._uploadImage(media, action);
-    });
-  };
 
   _handleMediaOnSelectFailure = (error) => {
     const { intl } = this.props;
@@ -187,7 +180,7 @@ class ProfileEditContainer extends Component {
 
   render() {
     const { children, currentAccount, isDarkTheme } = this.props;
-    const { isLoading, name, location, website, about, coverUrl, avatarUrl } = this.state;
+    const { isLoading, isUploading, name, location, website, about, coverUrl, avatarUrl } = this.state;
 
     return (
       children &&
@@ -202,6 +195,7 @@ class ProfileEditContainer extends Component {
         handleOnSubmit: this._handleOnSubmit,
         isDarkTheme,
         isLoading,
+        isUploading,
         location,
         name,
         website,
@@ -217,3 +211,10 @@ const mapStateToProps = (state) => ({
 });
 
 export default connect(mapStateToProps)(injectIntl(withNavigation(ProfileEditContainer)));
+
+
+const IMAGE_PICKER_OPTIONS = {
+  includeBase64: true,
+  width: 512,
+  height: 512,
+}

src/screens/profileEdit/screen/profileEditScreen.js

@@ -50,6 +50,7 @@ class ProfileEditScreen extends PureComponent {
           avatarUrl,
           coverUrl,
           isLoading,
+          isUploading,
           handleOnSubmit,
         }) => (
           <Fragment>
@@ -59,6 +60,7 @@ class ProfileEditScreen extends PureComponent {
               reputation={get(currentAccount, 'reputation')}
               avatarUrl={avatarUrl}
               showImageUploadActions={() => this._showImageUploadActions('avatarUrl')}
+              isUploading={isUploading && selectedUploadAction === 'avatarUrl'}
             />
             <ProfileEditForm
               formData={formData}
@@ -71,6 +73,7 @@ class ProfileEditScreen extends PureComponent {
               showImageUploadActions={() => this._showImageUploadActions('coverUrl')}
               handleOnItemChange={handleOnItemChange}
               isLoading={isLoading}
+              isUploading={isUploading && selectedUploadAction === 'coverUrl'}
               handleOnSubmit={handleOnSubmit}
             />
             <ActionSheet