ProfileSettings uses transient user after uploading avatar

src/containers/ProfileSettingsForm/ProfileSettingsForm.js

@@ -109,6 +109,8 @@ const ProfileSettingsFormComponent = props => {
 
   const hasUploadError = !!uploadImageError && !uploadInProgress;
   const errorClasses = classNames({ [css.avatarUploadError]: hasUploadError });
+  const transientUserProfileImage = profileImage.uploadedImage || user.profileImage;
+  const transientUser = { ...user, profileImage: transientUserProfileImage };
   const avatarImage = uploadInProgress && profileImage.file
     ? <ImageFromFile
         id={profileImage.id}
@@ -119,7 +121,7 @@ const ProfileSettingsFormComponent = props => {
       >
         {uploadingOverlay}
       </ImageFromFile>
-    : <Avatar className={errorClasses} user={user} />;
+    : <Avatar className={errorClasses} user={transientUser} />;
 
   const chooseAvatarLabel = profileImage.imageId || (uploadInProgress && profileImage.file)
     ? <div className={css.avatarContainer}>

src/containers/ProfileSettingsPage/ProfileSettingsPage.duck.js

@@ -35,10 +35,10 @@ export default function reducer(state = initialState, action = {}) {
         uploadImageError: null,
       };
     case UPLOAD_IMAGE_SUCCESS: {
-      // payload: { id: 'tempId', imageId: 'some-real-id'}
-      const { id, imageId } = payload;
+      // payload: { id: 'tempId', uploadedImage }
+      const { id, uploadedImage } = payload;
       const { file } = state.image || {};
-      const image = { id, imageId, file };
+      const image = { id, imageId: uploadedImage.id, file, uploadedImage };
       return { ...state, image, uploadInProgress: false };
     }
     case UPLOAD_IMAGE_ERROR: {
@@ -113,8 +113,11 @@ export function uploadImage(actionPayload) {
     dispatch(uploadImageRequest(actionPayload));
 
     return sdk.images
-      .uploadProfileImage({ image: actionPayload.file })
-      .then(resp => dispatch(uploadImageSuccess({ data: { id, imageId: resp.data.data.id } })))
+      .uploadProfileImage({ image: actionPayload.file }, { expand: true })
+      .then(resp => {
+        const uploadedImage = resp.data.data;
+        dispatch(uploadImageSuccess({ data: { id, uploadedImage  } }))
+      })
       .catch(e => dispatch(uploadImageError({ id, error: e })));
   };
 }

src/containers/ProfileSettingsPage/ProfileSettingsPage.js

@@ -128,6 +128,7 @@ ProfileSettingsPageComponent.propTypes = {
     id: string,
     imageId: propTypes.uuid,
     file: object,
+    uploadedImage: propTypes.image,
   }),
   logoutError: instanceOf(Error),
   notificationCount: number,