From 781567f0df343f810bfe646b4b746c4417ae7bcd Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Wed, 3 Mar 2021 10:37:31 +1100
Subject: [PATCH] add a spinner while we upload new user avatar on EditProfile

---
 ts/components/EditProfileDialog.tsx | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/ts/components/EditProfileDialog.tsx b/ts/components/EditProfileDialog.tsx
index 328d26792..bb79f91f3 100644
--- a/ts/components/EditProfileDialog.tsx
+++ b/ts/components/EditProfileDialog.tsx
@@ -20,6 +20,7 @@ import { PillDivider } from './session/PillDivider';
 import { ToastUtils, UserUtils } from '../session/utils';
 import { DefaultTheme } from 'styled-components';
 import { MAX_USERNAME_LENGTH } from './session/registration/RegistrationTabs';
+import { SessionSpinner } from './session/SessionSpinner';
 
 interface Props {
   i18n: any;
@@ -36,6 +37,7 @@ interface State {
   setProfileName: string;
   avatar: string;
   mode: 'default' | 'edit' | 'qr';
+  loading: boolean;
 }
 
 export class EditProfileDialog extends React.Component<Props, State> {
@@ -56,6 +58,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
       setProfileName: this.props.profileName,
       avatar: this.props.avatarPath,
       mode: 'default',
+      loading: false,
     };
 
     this.inputEl = React.createRef();
@@ -111,6 +114,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
           </p>
 
           <div className="spacer-lg" />
+          <SessionSpinner loading={this.state.loading} />
 
           {viewDefault || viewQR ? (
             <SessionButton
@@ -127,6 +131,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
               buttonType={SessionButtonType.BrandOutline}
               buttonColor={SessionButtonColor.Green}
               onClick={this.onClickOK}
+              disabled={this.state.loading}
             />
           )}
 
@@ -305,12 +310,20 @@ export class EditProfileDialog extends React.Component<Props, State> {
         ? this.inputEl.current.files[0]
         : null;
 
-    this.props.onOk(newName, avatar);
-
-    this.setState({
-      mode: 'default',
-      setProfileName: this.state.profileName,
-    });
+    this.setState(
+      {
+        loading: true,
+      },
+      async () => {
+        await this.props.onOk(newName, avatar);
+        this.setState({
+          loading: false,
+
+          mode: 'default',
+          setProfileName: this.state.profileName,
+        });
+      }
+    );
   }
 
   private closeDialog() {