[HOLD for payment 2024-10-07][$250] Loading skeleton for Settings header is slightly off

@shawnborton

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: 9.0.39-0
Reproducible in staging?: Y
Reproducible in production?: Y
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: @shawnborton
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1726813572232319

Action Performed:

Go to staging.new.expensify.com
Click Account settings > Trouble shooting
Click Clear cache and restart > Reset and Refresh
Observe the Avatar and Username in LHN

Expected Result:

No visual issues

Actual Result:

When the account is loading on Settings, the location of the loading skeleton is slightly off from where the actual avatar and username will go

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

CleanShot.2024-09-20.at.08.25.18.mp4

Recording.565.mp4

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021838488394004973335
Upwork Job ID: 1838488394004973335
Last Price Increase: 2024-09-24
Automatic offers:

c3024 | Reviewer | 104109595

Issue Owner

Current Issue Owner: @c3024

@kadiealexander

Triggered auto assignment to @kadiealexander (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

Edited by proposal-police: This proposal was edited at 2024-09-21 04:28:05 UTC.

Proposal

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

When the account is loading on Settings, the location of the loading skeleton is slightly off from where the actual avatar and username will go

What is the root cause of that problem?

Styles change

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

We should add margin-left with negative value here

App/src/styles/index.ts

Lines 2828 to 2830 in 513e6b3

    
           avatarSectionWrapperSkeleton: { 
        
               width: '100%', 
        
           },

What alternative solutions did you explore? (Optional)

Or we can reduce the value of startPositionX

This is results when we set marginLeft = -8px or startPositionX = 22px

Screen.Recording.2024-09-21.at.02.03.42.mov

Proposal 

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

Loading skeleton for Settings header is slightly off

What is the root cause of that problem?

The cx value is set to 30.

App/src/components/AccountSwitcherSkeletonView/index.tsx

Line 25 in 8383570

const startPositionX = 30;

App/src/components/AccountSwitcherSkeletonView/index.tsx

Line 36 in 8383570

cx={startPositionX}

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

Reduce it to 20 or something else as per requirement.

What alternative solutions did you explore? (Optional)

Result

Proposal

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

The setting avatar skeleton loader is not aligned to the left.

What is the root cause of that problem?

The cx value here is set to 30.

App/src/components/AccountSwitcherSkeletonView/index.tsx

Lines 35 to 36 in a5ca9b8

    
           <Circle 
        
               cx={startPositionX}

App/src/components/AccountSwitcherSkeletonView/index.tsx

Line 25 in a5ca9b8

const startPositionX = 30;

The cx value tells the position of the x center of the circle. If we set it to 0, then only the right half of the circle will be shown.

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

To align the circle to the left of the view, then we need to set the cx to be the half size of the circle, which is the same as its radius. So, we can put the radius value here as the startPositionX.

App/src/components/AccountSwitcherSkeletonView/index.tsx

Line 25 in a5ca9b8

const startPositionX = 30;

const startPositionX = avatarPlaceholderRadius;

@kadiealexander

@kadiealexander Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

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

@c3024

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

@c3024

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

Offer link
Upwork job

@c3024

PR is ready

cc: @c3024

@c3024

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@c3024] The PR that introduced the bug has been identified. Link to the PR:
[@c3024] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
[@c3024] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
[@c3024] Determine if we should create a regression test for this bug.
[@c3024] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[@kadiealexander] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

@bernhardoj

Payouts due:

Contributor: $250 @bernhardoj via manual request
Reviewer: $250 @c3024 (Offer link)

Upwork job is here.

Requested in ND.

@c3024

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@c3024] The PR that introduced the bug has been identified. Link to the PR: Delegate access: Add account switcher #47338

[@c3024] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/47338/files#r1791590530

[@c3024] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: No discussion was started because this could not have been identified earlier.

[@c3024] Determine if we should create a regression test for this bug. Yes

[@c3024] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal

Go to Settings > Troubleshoot
Press Clear cache and restart > Reset and Refresh
Go back to Settings if it is a narrow layout
Verify that the position of the circle on top left remains the same as the skeleton view's even after the avatar is loaded

@bernhardoj

$250 approved for @bernhardoj

Navigation Menu

Repository navigation

[HOLD for payment 2024-10-07][$250] Loading skeleton for Settings header is slightly off #49548

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)

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)

Result

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?

7 remaining items

Regression Test Proposal

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[HOLD for payment 2024-10-07][$250] Loading skeleton for Settings header is slightly off #49548

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Sep 20, 2024

nkdengineer commented on Sep 20, 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)

Krishna2323 commented on Sep 20, 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)

Result

bernhardoj commented on Sep 23, 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?

melvin-bot commented on Sep 23, 2024

melvin-bot commented on Sep 24, 2024

melvin-bot commented on Sep 24, 2024

7 remaining items

melvin-bot commented on Sep 24, 2024

bernhardoj commented on Sep 25, 2024

kadiealexander commented on Oct 8, 2024

kadiealexander commented on Oct 8, 2024

bernhardoj commented on Oct 8, 2024

c3024 commented on Oct 8, 2024

Regression Test Proposal

JmillsExpensify commented on Oct 15, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Proposal 

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