[$250] Web - Endless loading appears clicking on https://staging. new.expensify.com/details in concierge

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

---

Issue found when executing PR #10820

Action Performed:

1. Go to NewDot and login
2. Go to /details
3. Send message 'https://staging.new.expensify.com/details'
   in any chat room and click on it

Expected Result:

Details page opens

Actual Result:

Endless loading appears

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.2.0.0

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): any

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug5729950_10820_-_web.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

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

[francoisl]

It looks like the details page expects a login param - e.g. https://staging.new.expensify.com/details?login=concierge%40expensify.com works as you would expect.

App/src/pages/DetailsPage.js

Lines 31 to 32 in 9a98116

	/** login passed via route /details/:login */
	login: PropTypes.string,

Doesn't look like a bug to me, I'll reassign to the triage team for a second opinion.

[melvin-bot]

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

[aimane-chnaif]

Proposal

We should leave this page and go back to the root page.
This is already handled when DetailsPage component is mounted

App/src/pages/DetailsPage.js

Lines 70 to 77 in 9a98116

	componentDidMount() {
	if (lodashGet(this.props.route.params, 'login')) {
	return;
	}
	// Leave the page when the login information is not available
	Navigation.dismissModal();
	}

Then, why does this issue happen?
It happens because modal cannot be dismissed before modal is fully visible (isVisibility set to true)

Solution:
We can subscribe Modal.isVisibility from Onyx and dismiss modal only after modal is fully visible. so handle this on componentDidUpdate (for web) after subscribing ONYXKEYS.MODAL, as well as componentDidMount (for mobile)

Updated code:

App/src/pages/DetailsPage.js

Lines 208 to 215 in 9a98116

	withOnyx({
	session: {
	key: ONYXKEYS.SESSION,
	},
	personalDetails: {
	key: ONYXKEYS.PERSONAL_DETAILS,
	},
	}),

    withOnyx({
        session: {
            key: ONYXKEYS.SESSION,
        },
        personalDetails: {
            key: ONYXKEYS.PERSONAL_DETAILS,
        },
        modal: {
            key: ONYXKEYS.MODAL,
        },
    }),

clone componentDidMount code into componentDidUpdate

    componentDidUpdate() {
        if (lodashGet(this.props.route.params, 'login')) {
            return;
        }

        // Leave the page when the login information is not available
        Navigation.dismissModal();
    }

After this fix, nothing happens when click https://staging.new.expensify.com/details

10966.mov

[jboniface]

job post

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (Exported)

[melvin-bot]

Triggered auto assignment to @Beamanator (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[Santhosh-Sellavel]

@Beamanator There might be an issue with deployment let's wait until the next deployment and check this out, please put it on hold for time being thanks!

[Beamanator]

@Santhosh-Sellavel - on hold! What makes you think deployment got messed up by the way?

[Santhosh-Sellavel]

@Beamanator Here is another regression that was due to deploy error #10963

Please check out discussions there, it should clarify.

[melvin-bot]

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

[melvin-bot]

Current assignee @Santhosh-Sellavel is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[aimane-chnaif]

I already explained RCA and solution in my proposal
Also this: #10966 (comment)

[mountiny]

Thank you @aimane-chnaif What do you think of @aimane-chnaif proposal above 🙌

[Santhosh-Sellavel]

Check out these comments

#10966 (comment)

#10966 (comment)

Let me know this should be treated as regression Or fixed separately.
Thanks!

@Beamanator

[Beamanator]

@Santhosh-Sellavel I guess it makes sense to fix this separately, the crash was fixed in the other issue so now let's fix clicking the link here, thoughts?

[Santhosh-Sellavel]

I am also on the side of handling it separately.

[Santhosh-Sellavel]

Need some time to dig this more.

[Santhosh-Sellavel]

Will look into it this week, no need to double until then thanks! @dylanexpensify

[dylanexpensify]

Sounds good, any update @Santhosh-Sellavel ??

[melvin-bot]

@Beamanator, @dylanexpensify, @Santhosh-Sellavel Whoops! This issue is 2 days overdue. Let's get this updated quick!

[Beamanator]

Bump @Santhosh-Sellavel

[Santhosh-Sellavel]

@Beamanator This issue is unable to reproduce, can we verify and close this? May be I should have checked sooner to reproduce this again.

[aimane-chnaif]

After deep research, I confirmed #10949 which fixes #10271 also fixes this GH.
So this issue is not reproducible anymore from v1.2.5-0 (staging), from v1.2.5-2 (production)

[Beamanator]

I also can't reproduce, thanks for the notice, both! Closing