[$1000] Clicking on 'Didn't receive a magic code' after being offline spins the loader infinitely in the button

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Go to android latest one
2. Log out if already signed in
3. Make sure you are on login page
4. Enter email and click on continue
5. Now be offline
6. Click on 'Didn't receive a magic code' and notice that the loader spins infinitely

Expected Result:

Clicking on 'Didn't receive a magic code' after being offline should not spin the loader infinitely in the button and should throw an error

Actual Result:

Clicking on 'Didn't receive a magic code' after being offline spins the loader infinitely in the button

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [x] Android / native
• [ ] Android / Chrome
• [ ] iOS / native
• [ ] iOS / Safari
• [ ] MacOS / Chrome / Safari
• [ ] MacOS / Desktop

Version Number: 1.3.4 Reproducible in staging?: y Reproducible in production?: If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation

https://user-images.githubusercontent.com/43996225/233811830-b2c29221-d419-434c-87ff-5d33cb2e316d.mp4

https://user-images.githubusercontent.com/43996225/233811850-05c22e49-6bc6-4a90-a332-9f922ac8d35c.mp4

Expensify/Expensify Issue URL: Issue reported by: @priya-zha Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1682142890351589

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0149391e81535c09d1
• Upwork Job ID: 1651626813261238272
• Last Price Increase: 2023-04-27

[MelvinBot]

Triggered auto assignment to @adelekennedy (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[MelvinBot]

Bug0 Triage Checklist (Main S/O)

• [x] This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• [x] This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• [x] This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• [x] This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• [x] I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[MelvinBot]

@adelekennedy Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~0149391e81535c09d1

[MelvinBot]

Current assignee @adelekennedy is eligible for the External assigner, not assigning anyone new.

[MelvinBot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rushatgabhane (External)

[adelekennedy]

woof yeah let's fix this one - though I wonder if this will need to be internal?

[MelvinBot]

Triggered auto assignment to @youssef-lr (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[alitoshmatov]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Clicking on 'Didn't receive a magic code' after being offline spins the loader infinitely in the button

What is the root cause of that problem?

We calling an action and it is providing optimistic data which has isLoading field set to true, but request it self is queued and waiting for network to be online

What changes do you think we should make in order to solve the problem?

We should check network connection and set an error in state with new field maybe called error if it is offline, and prevent User.resendValidateCode from being called and do not set state.linkSent here: https://github.com/Expensify/App/blob/3066281875c43d91cbf6261f2570aa2a3e5002b0/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js#L134-L144

And modify here: https://github.com/Expensify/App/blob/3066281875c43d91cbf6261f2570aa2a3e5002b0/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js#L251-L254 To show state.error as well.

And we should list to network changes and clear error when we become online.

We can use this message session.offlineMessageRetry which is Looks like you're offline. Please check your connection and try again. or write a new one.

What alternative solutions did you explore? (Optional)

We can disable Didn't receive a magic code? like we are doing main button when offline

[alitoshmatov]

Updated my proposal https://github.com/Expensify/App/issues/17836#issuecomment-1526043913

[coderkhalide]

Proposal

Please re-state the problem that we are trying to solve in this issue.

One issue has been identified where clicking the "Didn't receive a magic code" button after being offline causes the loader to spin infinitely within the button.

What is the root cause of that problem?

When the user clicks on the "Didn't receive a magic code" button while offline, an action is triggered to send a request to the server. This action is then queued and will wait until the device is back online. While waiting, the spinner will keep loading indefinitely.

What changes do you think we should make in order to solve the problem?

• One solution could be to implement a timeout mechanism on the action that sends the request for the magic code. If the request does not receive a response within a certain time limit, it could display an error message to the user and prompt them to try again later when they have a stable internet connection.

• Another solution could be to disable the "Didn't receive a magic code" button when the user is offline, and display a message indicating that the button will become active once the user is back online.

• Finally, the loader animation on the button should be stopped and hidden once the action is queued, and only reappear if the action is unsuccessful due to a network error.

What alternative solutions did you explore? (Optional)

• Add a timeout mechanism: After a certain amount of time, if the network does not become available, display an error message to the user and allow them to try again later.

• Use a caching mechanism: Store the user's request in a local cache and attempt to send it again when the network becomes available.

• Implement a retry mechanism: If the network is unavailable when the user clicks the button, periodically retry sending the request until it is successful.

• Display a message to the user when the request is queued, indicating that the request will be sent once the network becomes available. This could help manage user expectations and prevent confusion.

[MelvinBot]

📣 @coderkhalide! 📣

Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[coderkhalide]

Contributor details Your Expensify account email: [email protected] Upwork Profile Link: https://www.upwork.com/freelancers/~01b342bf3254f18486

[MelvinBot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[dhairyasenjaliya]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• Clicking on 'Didn't receive a magic code' after being offline spins the loader infinitely in the button

What is the root cause of that problem?

• The root cause why loader is infinitely is when we press Didn't receive a magic code on offline status at that time we are add an API request to an queue along with that setting optimistic data set to be true and we are waiting for network to be online again and set loader as per that which works well expect loader is displayed infinitely

What changes do you think we should make in order to solve the problem?

• To resolve this issue we just need to manage the loader condition to validation if user is offline then we just stop showing loader meanwhile in background we are still waiting for network once it fall back it should already make API request

• Also optionally we can also restrict and disable onClick of Didn't receive a magic code by watching status of this.props.network.isOffline but I don’t think this required since we are following offline first approach and we are already validating if we already make request for Didn't receive a magic code we are removing that link makes sense

• We are already showing offline status so no need to add any extra validation there

       <Button
           isDisabled={this.props.network.isOffline}
           success
           style={[styles.mv3]}
           text={this.props.translate('common.signIn')}
+         isLoading={!this.props.network.isOffline && this.props.account.isLoading}
           onPress={this.validateAndSubmitForm}
 />



```

[dhairyasenjaliya]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• Clicking on 'Didn't receive a magic code' after being offline spins the loader infinitely in the button

What is the root cause of that problem?

• The root cause why loader is infinitely is when we press Didn't receive a magic code on offline status at that time we are add an API request to an queue along with that setting optimistic data set to be true and we are waiting for network to be online again and set loader as per that which works well expect loader is displayed infinitely

What changes do you think we should make in order to solve the problem?

• To resolve this issue we just need to manage the loader condition to validation if user is offline then we just stop showing loader meanwhile in background we are still waiting for network once it fall back it should already make API request

• Since after pressing one time we are disabling the link we can imporve this one as well lets says user is in offline state and press Didn't receive a magic code once then we make request in queue then could simply show the message Request successfully waiting for network something like that (need to define message)

• Also optionally we can also restrict and disable onClick of Didn't receive a magic code by watching status of this.props.network.isOffline but I don’t think this required since we are following offline first approach and we are already validating if we already make request for Didn't receive a magic code we are removing that link makes sense

• We are already showing offline status so no need to add any extra validation there

BaseValidateCodeForm.js

// Loader changes
       <Button
           isDisabled={this.props.network.isOffline}
           success
           style={[styles.mv3]}
           text={this.props.translate('common.signIn')}
+         isLoading={!this.props.network.isOffline && this.props.account.isLoading}
           onPress={this.validateAndSubmitForm}
 />

BaseValidateCodeForm.js

// Improve UX after request is made 

 <View style={[styles.changeExpensifyLoginLinkContainer]}>
    {this.state.linkSent ? 
+         this.props.network.isOffline ?
+           (
+               <Text style={[styles.mt2]}>
+                   {"Request succesfuly made waiting for netwrok "}
+             </Text>
         ) 
         :(
              <Text style={[styles.mt2]}>
                   {this.props.account.message ? this.props.translate(this.props.account.message) : ''}
              </Text>
      ) 
</View>
    

[rushatgabhane]

The flow chart led me to offline Pattern C https://github.com/Expensify/App/blob/main/contributingGuides/OFFLINE_UX.md

[rushatgabhane]

We can disable Didn't receive a magic code? like we are doing main button when offline

@youssef-lr we can go ahead with @alitoshmatov's Alternate proposal.

I don't think we need to show any extra message because we're already showing "you appear to be offline"

C+ reviewed 🎀 👀 🎀

[youssef-lr]

I'm able to reproduce this differently, and I think it's related to this issue as well. cc @marcaaron

https://user-images.githubusercontent.com/9680864/236001395-327dfcaf-094f-4d65-99b4-d2302ed49761.mov

[melvin-bot[bot]]

@youssef-lr @rushatgabhane @adelekennedy this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[youssef-lr]

I will get to this today.

[adelekennedy]

@youssef-lr @rushatgabhane do we think this is related to this issue? if so is there a separate fix for these two issues or should they be combined?

[melvin-bot[bot]]

@youssef-lr @rushatgabhane @adelekennedy this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ and will need to go internal. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

[alitoshmatov]

I think this issue is not related to https://github.com/Expensify/App/issues/17148, since as said here this two issue have different root causes.

[adelekennedy]

thank you @alitoshmatov @youssef-lr @rushatgabhane can you review the point above? Should we move forward with a hire for this issue?

[rushatgabhane]

@adelekennedy sure! we can go ahead with https://github.com/Expensify/App/issues/17836#issuecomment-1529657664

[adelekennedy]

@youssef-lr do you agree with the above? (sorry to be pedantic I'm just trying to follow the SO!

When the C+ and CME have decided to hire a contributor for their proposal, hire the contributor (video tutorial found here).

[melvin-bot[bot]]

Triggered auto assignment to @NicMendonca (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[adelekennedy]

@NicMendonca I'm going (mostly) ooo until the 30th when I'll take it back - we're just pending @youssef-lr review on the proposal above!

[melvin-bot[bot]]

@youssef-lr @rushatgabhane @adelekennedy this issue is now 4 weeks old and preventing us from maintaining WAQ, can you:

• Decide whether any proposals currently meet our guidelines and can be approved as-is today
• If no proposals meet that standard, please take this issue internal and treat it as one of your highest priorities
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!