oxen-io/session-desktop
1
0
Fork 0
mirror of https://github.com/oxen-io/session-desktop.git synced 2023-12-14 02:12:57 +01:00
Code Issues Projects Releases Wiki Activity

add a spinner while we upload new user avatar on EditProfile

Browse source
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
1 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
ts/components/EditProfileDialog.tsx
View file

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