Fixes: Save profile picture automatically after upload

Fix jank when cropping large photos

app/scenes/Settings/Profile.js

@@ -52,8 +52,13 @@ class Profile extends React.Component<Props> {
     this.name = ev.target.value;
   };
 
-  handleAvatarUpload = (avatarUrl: string) => {
+  handleAvatarUpload = async (avatarUrl: string) => {
     this.avatarUrl = avatarUrl;
+
+    await this.props.auth.updateUser({
+      avatarUrl: this.avatarUrl,
+    });
+    this.props.ui.showToast('Profile picture updated', 'success');
   };
 
   handleAvatarError = (error: ?string) => {

app/scenes/Settings/components/ImageUpload.js

@@ -38,8 +38,15 @@ class DropToImport extends React.Component<Props> {
     this.file = files[0];
   };
 
-  handleCrop = async () => {
+  handleCrop = () => {
     this.isUploading = true;
+
+    // allow the UI to update before converting the canvas to a Blob
+    // for large images this can cause the page rendering to hang.
+    setImmediate(this.uploadImage);
+  };
+
+  uploadImage = async () => {
     const canvas = this.avatarEditorRef.getImage();
     const imageBlob = dataUrlToBlob(canvas.toDataURL());
     try {

app/stores/AuthStore.js

@@ -62,7 +62,7 @@ class AuthStore {
   };
 
   @action
-  updateUser = async (params: { name: string, avatarUrl: ?string }) => {
+  updateUser = async (params: { name?: string, avatarUrl: ?string }) => {
     this.isSaving = true;
 
     try {