[HOLD for payment 2021-09-17] Workspace - Add Loading UI after user saves profile photo

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Issue was found when executing this PR #4298

Action Performed:

1. Lunch the app
2. Log in with expensifail account
3. Go to Settings - click on any workspace
4. Click on picture pen and click upload
5. Click on Save button

Expected Result:

Able to save picture only on first press on the button

Actual Result:

Able to save picture only on second press or 3rd press of the button

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Android

Version Number:
1.0.83-0
Logs: https://stackoverflow.com/c/expensify/questions/4856
**Notes/Photos/Videos:

Bug5182708_Screen_Recording_20210806-132657_Expensifycash.mp4

Expensify/Expensify Issue URL:

View all open jobs on Upwork

this job

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[MelvinBot]

Triggered auto assignment to @ctkochan22 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[mananjadhav]

Proposal

The user doesn't have to click twice to save the picture. Basically, there isn't any feedback to the user on changes being saved. Need to do two things:

1. Show a success/error message on Save
2. While the API is running disable the Save button

In WorkspaceEditorPage.js,

    this.state = {
       isSubmitting: true
    }


    submit() {
        this.setState({ isSubmitting: true});
        this.uploadAvatarPromise.then(() => {
            const name = this.state.name.trim();
            const avatarURL = this.state.avatarURL;
            const policyID = this.props.policy.id;

            update(policyID, {name, avatarURL});
            this.setState({ isSubmitting: false}); // Manage flag state
            Growl.sucess(translate('updatesuccess')); // Show feedback to the server
        }).catch(err => {
            this.setState({ isSubmitting: false});
            Growl.error(translate('updateFailed'));
        });
   }. 


   <Button
        success
        isDisabled={this.state.isSubmitting} /// Disable button when submitting
        style={[styles.w100]}
        text={this.props.translate('workspace.editor.save')}
        onPress={this.submit}
        pressOnEnter
   />

Try with a smaller size image you'll see it redirects quickly.

[ctkochan22]

I don't think this is a blocker. It looks like there is just no UI feedback that indicates that the request was sent and we are awaiting a response.

Can we close this or edit the title to `Add loading gif/ui once "save" button is clicked

[MelvinBot]

Triggered auto assignment to @puneetlath (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.