From d74b99635e53acbc82be3bc2961f3714dc080f54 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 17 Nov 2018 18:25:10 -0800
Subject: [PATCH] Fixes: Save profile picture automatically after upload Fix
 jank when cropping large photos

---
 app/scenes/Settings/Profile.js                | 7 ++++++-
 app/scenes/Settings/components/ImageUpload.js | 9 ++++++++-
 app/stores/AuthStore.js                       | 2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/scenes/Settings/Profile.js b/app/scenes/Settings/Profile.js
index 7a24e14a..1d01a2a8 100644
--- a/app/scenes/Settings/Profile.js
+++ b/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) => {
diff --git a/app/scenes/Settings/components/ImageUpload.js b/app/scenes/Settings/components/ImageUpload.js
index 386c4ea7..116fdd0a 100644
--- a/app/scenes/Settings/components/ImageUpload.js
+++ b/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 {
diff --git a/app/stores/AuthStore.js b/app/stores/AuthStore.js
index 418bad75..12526bfa 100644
--- a/app/stores/AuthStore.js
+++ b/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 {