[HOLD for #29428] - [$500] Login - Settings page has no skeleton placeholder when the page is loading

[lanitochka17]

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

---

Version Number: 1.3.90-2

Reproducible in staging?: Yes

Reproducible in production?: Yes

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: Applause - Internal Team

Slack conversation:

Action Performed:

1. Launch New Expensify app
2. Log in with a high traffic account
3. When the page is loading, open Settings

Expected Result:

Settings page has skeleton placeholder when the page is loading

Actual Result:

Settings page has no skeleton placeholder when the page is loading

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

Android: mWeb Chrome

iOS: Native

Bug6250476_1698249216544.RPReplay_Final1698199526.mp4

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01fc78993cd9ce2750
• Upwork Job ID: 1717214985723400192
• Last Price Increase: 2023-10-25
• Automatic offers:
• bernhardoj | Contributor | 27699378

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01fc78993cd9ce2750

[melvin-bot]

Triggered auto assignment to @CortneyOfstad (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

[melvin-bot]

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

[bernhardoj]

Proposal

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

There is no skeleton when opening the settings page after login.

What is the root cause of that problem?

Previously, we will show the skeleton if the user's personal details data is empty.

App/src/pages/settings/InitialSettingsPage.js

Lines 334 to 339 in 1e22431

	{_.isEmpty(props.currentUserPersonalDetails) || _.isUndefined(props.currentUserPersonalDetails.displayName) ? (
	<CurrentUserPersonalDetailsSkeletonView
	backgroundColor={themeColors.appBG}
	avatarSize={CONST.AVATAR_SIZE.XLARGE}
	/>
	) : (

However, in this functional migration PR, if the personal detail is empty, we return null.

App/src/pages/settings/InitialSettingsPage.js

Lines 326 to 331 in 1e22431

	// On the very first sign in or after clearing storage these
	// details will not be present on the first render so we'll just
	// return nothing for now.
	if (_.isEmpty(props.currentUserPersonalDetails)) {
	return null;
	}

Also, the skeleton color is currently the same color as the RHP background color (#061B09), so we still won't be able to see the skeleton.

App/src/pages/settings/InitialSettingsPage.js

Lines 335 to 336 in 1e22431

	<CurrentUserPersonalDetailsSkeletonView
	backgroundColor={themeColors.appBG}

Here is the reason why it's changed. But now, the settings header section background color is back to the app bg color.

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

Remove these codes:

App/src/pages/settings/InitialSettingsPage.js

Lines 329 to 331 in 1e22431

	if (_.isEmpty(props.currentUserPersonalDetails)) {
	return null;
	}

App/src/pages/settings/InitialSettingsPage.js

Line 336 in 1e22431

backgroundColor={themeColors.appBG}

Screen.Recording.2023-10-26.at.00.53.28.mov

[ishpaul777]

I beleive this will be resolved in this PR

cc @robertKozik

[robertKozik]

Yeah I confirm, it should be resolved by the linked PR. Maybe we can put this issue on hod until the PR will be merged? After that we can retest this scenario to be sure it's fixed

[bernhardoj]

I think that PR would partly resolve the issue, but I agree we can hold for it.

[thesahindia]

Let's hold this @CortneyOfstad

[CortneyOfstad]

Sounds good! Updating the title now 👍

[CortneyOfstad]

@thesahindia looks like the PR was closed — can you confirm if anything else is needed here? Thanks!

[thesahindia]

@thesahindia looks like the PR was closed — can you confirm if anything else is needed here? Thanks!

The PR was closed and the issue is still present. Let's remove the hold.

[thesahindia]

@bernhardoj's proposal looks good to me!

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @thesahindia Please request via NewDot manual requests for the Reviewer role ($500)

[melvin-bot]

📣 @bernhardoj 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[bernhardoj]

PR is ready

cc: @thesahindia

[CortneyOfstad]

@thesahindia any update on the PR above? Thanks!

[thesahindia]

@CortneyOfstad, the PR was merged 3 weeks ago.

[bernhardoj]

I think this is ready for payment

[CortneyOfstad]

Sorry for missing this! @thesahindia in the future, please make sure to remove the "Reviewing" label and add the "awaiting payment" labels, as this will trigger the payment process to begin 👍

[situchan]

Sorry for missing this! @thesahindia in the future, please make sure to remove the "Reviewing" label and add the "awaiting payment" labels, as this will trigger the payment process to begin 👍

FYI: C+ team doesn't have permission to add/remove labels. It should be done by BZ or engineer

[CortneyOfstad]

Weird, I was under the impression they could — odd. But thanks for the heads up!

@bernhardoj I've sent you an offer in Upwork as the previous one expired. Please let me know as soon as that is accepted and I can get that paid to you ASAP 👍

[bernhardoj]

@CortneyOfstad accepted. Thanks!

[CortneyOfstad]

Payment Summary

@thesahindia to be paid $500 via NewDot
@bernhardoj was paid $500 via Upwork

[JmillsExpensify]

$500 payment approved for @thesahindia based on comment above.