Contact methods- Changes will be reverted if added after deep linking or if quick opening the settings on slow network

[kbecciv]

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

---

Version Number: 1.3.75-0
Reproducible in staging?: n/a
Reproducible in production?: n/a
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
Expensify/Expensify Issue URL:
Issue reported by: @lcsvcn
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1696249705045799

Action Performed:

1. Deep link to https://staging.new.expensify.com/settings/profile/contact-methods[,](https://staging.new.expensify.com/settings/profile/contact-methods,) by pasting this in browser before put mail code
2. Enable on console 3g slower network or any emulate slow network
3. Put email code and login
4. Add new email
5. Wait
6. All changes made will be reverted after load the email from server

Expected Result:

Not allow user interaction while is loading information from server

Actual Result:

The product allow user interaction before the data is loaded from backed, when it is finish loading it override any changes.

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Android: Native

untitled.webm

Android: mWeb Chrome

untitled2.webm

iOS: Native

20231004_144041.mp4

iOS: mWeb Safari

MacOS: Chrome / Safari

Screen.Recording.2023-10-09.at.18.15.02.mov

MacOS: Desktop

Screen.Recording.2023-10-04.at.14.03.53.mov

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• 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
• 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.
• 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.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[lcsvcn]

UPDATED STEP BY STEP:

1. Make sure you are Sign Out
2. At login input your email
3. Before you input your code, deep link to https://staging.new.expensify.com/settings/profile/contact-methods/new or https://staging.new.expensify.com/settings/profile/contact-methods (first one leads directly to the input), by pasting this in browser before put mail code
4. Enable on console 3g slower network or any emulate slow network (example: 20 kbps download and 20 kbps upload)
5. Save an email to clipboard, like for example: test@gmail.com
6. Put email code and login
7. Quickly add the saved email and tap save (note: you need to quickly add the email and save), because the issue is with concurrency between data that is fetched and data input while loading, you will notice if you went to contact methods page that add email button is enabled, even tho is still loading data from server.
8. wait app finishes loading
9. you will see that saved email will be lost and it will be overrides with information that is loaded by the server.
   (you can keep the slow network since step 1, if you want, but it will take more time to load the steps 1 to 6, and it is require to emulate slow network only when signing in)

On android network was the easiest way to reproduce, because it supports simulate 2G network.

I would test in all scenarios like all 2G and slow 3G network.

on Chrome, you can add custom network profiles to test the 2G networks as well here:

Screen.Recording.2023-10-09.at.18.08.02.mov

[lcsvcn]

Proposal

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

on slow network, contact methods changes will be reverted if added after deep linking or if quick opening the settings

What is the root cause of that problem?

The root cause of the problem is that we currently don't display a loading while app data is still being fetched, that way the user can interact with the select list before the data is fetched from the backend.
My proposal is to add a loading screen while data hasn't completed fetching.

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

I recommend adding the FullScreenLoadingIndicator component, similar to how it is done in the LegalNamePage.js:

App/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js

Line 80 in 70e9fa0

<FullscreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />

And also disable the add button while data is still loading to avoid concurrency on slower networks.
So basically at:

App/src/pages/settings/Profile/Contacts/ContactMethodsPage.js

Lines 54 to 59 in 70e9fa0

	const defaultProps = {
	loginList: {},
	session: {
	email: null,
	},
	};

We add this:

const defaultProps = {
    isLoading: true,
    (...)
};

At:

App/src/pages/settings/Profile/Contacts/ContactMethodsPage.js

Lines 133 to 138 in 70e9fa0

	<Button
	success
	text={props.translate('contacts.newContactMethod')}
	onPress={() => Navigation.navigate(ROUTES.SETTINGS_NEW_CONTACT_METHOD)}
	pressOnEnter
	/>

We change to this:

 <Button
    (...)
    isDisabled={props.isLoading}
 />

At:

App/src/pages/settings/Profile/Contacts/ContactMethodsPage.js

Line 130 in 70e9fa0

{loginMenuItems}

We add the FullscreenLoadingIndicator component to show if data is still pending or loading, showing visual indicator that the content that is appearing is not yet fetched.
We also need to add the ONYXKEYS.IS_LOADING_APP to the file, so we can know when it is finished fetching info.
The solution I proposed is how it is done across all other sections of the app:

Address page:
#27814 (comment)

Display Name page:
#28077 (comment)

Most Recent page:
#28184 (comment)

With that solution in any network scenario, we would not allow user to input data and display a loading to indicate progress on fetching the saved information for his account.

What alternative solutions did you explore? (Optional)

N/A