[$250] Settings - Infinite loading on Private section if notification is received

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

Found when validating PR : #37967

Version Number: 1.4.54.0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

Precondition: Notifications should be enabled.

Log out and close all Chrome windows
Open Chrome and log in with a new expensifail user
Navigate to Account settings - Profile

Expected Result:

The section should load.

Actual Result:

Infinite loading on Profile - Private section if notification is received from Concierge. It loads at first but starts spinning after receiving the notification.
I'm unable to check prod as I'm not getting a notification there.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6418826_1710839027026.bandicam_2024-03-19_09-55-27-686.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~011ce0234e9c243c7c
Upwork Job ID: 1775984986283810816
Last Price Increase: 2024-04-04

@isabelastisser

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

We think this issue might be related to the #collect project.

Proposal

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

Settings - Infinite loading on Private section if notification is received

What is the root cause of that problem?

When signing in the app, the API OpenApp is called. It returns private_personalDetails: [].
Then if we open the setting profile, the API OpenPersonalDetailsPage is called. It returns:

{
  "legalFirstName": "",
  "legalLastName": "",
  "dob": "",
  "address": {
    "street": "",
    "city": "",
    "state": "",
    "zip": "",
    "country": ""
  },
  "isLoading": false
}

If the API OpenPersonalDetailsPage is called successfully before the other one, OpenApp, the bug will occur. Because:
In the ProfilePage, we use the below logic to decide whether we should display the loading indicator or not:

App/src/pages/settings/Profile/ProfilePage.tsx

Line 73 in 51ef6c1

const isLoadingPersonalDetails = privatePersonalDetails?.isLoading ?? true;

and in this case, isLoadingPersonalDetails is always true because privatePersonalDetails: []

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

We already have logic to call the OpenPersonalDetailsPage again if privatePersonalDetails is not available as below:

App/src/hooks/usePrivatePersonalDetails.ts

Lines 11 to 18 in 8206580

    
           useEffect(() => { 
        
               const personalDetails = PersonalDetails.getPrivatePersonalDetails(); 
        
               // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing 
        
               if (network?.isOffline || (Boolean(personalDetails) && personalDetails?.isLoading !== undefined)) { 
        
                   return; 
        
               } 
        
               PersonalDetails.openPersonalDetails();

but it is not called again when the privatePersonalDetails is changed.

So the solution is that we should add the privatePersonalDetails to the above useEffect 's dependencies.
For example, instead of using usePrivatePersonalDetails like here, we can use:

  useEffect(() => {
        if (network?.isOffline || (Boolean(personalDetails) && personalDetails?.isLoading !== undefined)) {
            return;
        }

        PersonalDetails.openPersonalDetails();
    }, [network?.isOffline, personalDetails]);

Note: the above is just a quick code change to test.

What alternative solutions did you explore? (Optional)

NA

Added to wave collect.

👋 I see this one was added to Hot Picks. Is it a backend issue, or is it frontend and can go External?

I think it is FE issue based on RCA here

Cool, let's send it External!

Niiiice, maybe we wait till 1 more retest then close if it's fixed 👍

@mvtglobally

@mvtglobally can you please provide an update? Is it fixed? Thanks!

@mvtglobally

Bump @mvtglobally

Issue not reproducible during KI retests. (Second week)

Looks like we'll close this this week 🙏

Issue not reproducible during KI retests. (Third week)

Nice, closing!

Navigation Menu

Repository navigation

[$250] Settings - Infinite loading on Private section if notification is received #38602

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

71 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	useEffect(() => {
	const personalDetails = PersonalDetails.getPrivatePersonalDetails();
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	if (network?.isOffline \|\| (Boolean(personalDetails) && personalDetails?.isLoading !== undefined)) {
	return;
	}

	PersonalDetails.openPersonalDetails();

[$250] Settings - Infinite loading on Private section if notification is received #38602

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Mar 19, 2024

izarutskaya commented on Mar 19, 2024

nkdengineer commented on Mar 21, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

isabelastisser commented on Apr 1, 2024

trjExpensify commented on Apr 2, 2024

nkdengineer commented on Apr 2, 2024

trjExpensify commented on Apr 4, 2024

71 remaining items

Beamanator commented on Jun 9, 2024

isabelastisser commented on Jun 17, 2024

isabelastisser commented on Jun 26, 2024

mvtglobally commented on Jul 3, 2024

Beamanator commented on Jul 8, 2024

mvtglobally commented on Jul 11, 2024

Beamanator commented on Jul 15, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions