add a spinner while we upload new user avatar on EditProfile

This commit is contained in:
Audric Ackermann 2021-03-03 10:37:31 +11:00
parent 6fbe060973
commit 781567f0df
No known key found for this signature in database
GPG key ID: 999F434D76324AD4

View file

@ -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(
{
loading: true,
},
async () => {
await this.props.onOk(newName, avatar);
this.setState({
loading: false,
this.setState({
mode: 'default',
setProfileName: this.state.profileName,
});
mode: 'default',
setProfileName: this.state.profileName,
});
}
);
}
private closeDialog() {