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

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.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:

Launch New Expensify app
Log in with a high traffic account
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?

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

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

@CortneyOfstad

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

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

@thesahindia

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

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

@robertKozik

I beleive this will be resolved in this PR

cc @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

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

@thesahindia

PR is ready

cc: @thesahindia

@thesahindia

@thesahindia any update on the PR above? Thanks!

@CortneyOfstad

@CortneyOfstad, the PR was merged 3 weeks ago.

I think this is ready for payment

@thesahindia

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 👍

@thesahindia

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

@bernhardoj

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 👍

@CortneyOfstad

@CortneyOfstad accepted. Thanks!

@thesahindia

Payment Summary

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

@thesahindia

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

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Bug0 Triage Checklist (Main S/O)

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?

19 remaining items

Payment Summary

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

	// 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;
	}

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Oct 25, 2023

melvin-bot commented on Oct 25, 2023

melvin-bot commented on Oct 25, 2023

Bug0 Triage Checklist (Main S/O)

melvin-bot commented on Oct 25, 2023

bernhardoj commented on Oct 25, 2023

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?

ishpaul777 commented on Oct 25, 2023

robertKozik commented on Oct 26, 2023

bernhardoj commented on Oct 27, 2023

19 remaining items

bernhardoj commented on Nov 16, 2023

CortneyOfstad commented on Dec 6, 2023

thesahindia commented on Dec 10, 2023

bernhardoj commented on Dec 16, 2023

CortneyOfstad commented on Dec 21, 2023

situchan commented on Dec 21, 2023

CortneyOfstad commented on Dec 21, 2023

bernhardoj commented on Dec 21, 2023

CortneyOfstad commented on Dec 21, 2023

Payment Summary

JmillsExpensify commented on Jan 14, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions