[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.

[puneetlath]

I was able to confirm that this behavior is also happening on iOS as well.

[puneetlath]

@ctkochan22 if you think this is a good external candidate, add the external label please!

[MelvinBot]

Triggered auto assignment to @jboniface (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[jboniface]

weird that being assigned something via auto assigner doesn't remove the overdue label. this made it seem like I had an issue overdue, when really I'd just been assigned to it a couple hours ago.

[mananjadhav]

Okay @roryabraham I'll take a note of that. I'll check if the image is replaced or the title is changed and accordingly enabled/disable the save button.

[MelvinBot]

@jboniface, @roryabraham it looks like no one is assigned to work on this job.
Please double the price or add a comment stating why the job isn't being doubled.

[roryabraham]

@jboniface Let's hire @mananjadhav for this so he can get started implementing the solution 👍

[jboniface]

progress is still being made on the PR

[mananjadhav]

PR is under review.

[mananjadhav]

@roryabraham @jboniface

I was wondering if we could bump the budget for this one considering the amount of work we achieved with the PR.

Wouldn't have asked if I was the reporter as would've received the bonus. Hope you'll consider.

[jboniface]

@mananjadhav how much of an increase are you requesting?

[mananjadhav]

Well, we added 1 feature and made improvements in the Animation. Updated that at two places Workspace and Profile.

I would say roughly +350. But I’d also highlight that @roryabraham was the one who helped with the Animation rewrite (Something that would then reduce the ask?)

[botify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[mananjadhav]

Also an fyi, I had reported the feature requests here: #4801 (comment)

[roryabraham]

@mananjadhav went above-and-beyond the original scope on this one and was a good sport with lots of refactoring - I think we can bump the pay to $500

[botify]

🚀 Deployed to staging by @roryabraham in version: 1.0.95-2 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[botify]

🚀 Deployed to production by @roryabraham in version: 1.0.96-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[jboniface]

paid

[mananjadhav]

@mananjadhav went above-and-beyond the original scope on this one and was a good sport with lots of refactoring - I think we can bump the pay to $500

@jboniface Did we decide not to increase the budget? I received 250$ only on Upwork

[jboniface]

Ah, shoot, I didn't scroll up. I'll send you another contract, just a sec.

[jboniface]

ok, sent

[mananjadhav]

Applied

Ah, shoot, I didn't scroll up. I'll send you another contract, just a sec.

No worries. Thanks

[jboniface]

all set!