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

[m-natarajan]

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:

1. Go to staging.new.expensify.com
2. Click Account settings > Trouble shooting
3. Click Clear cache and restart > Reset and Refresh
4. 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?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

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

[melvin-bot]

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.

[nkdengineer]

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

[Krishna2323]

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

[bernhardoj]

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;

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[QasimBham]

Proposal
Please re-state the problem that we are trying to solve in this issue.
The setting's icon is not aligned to the left.
What is the root cause of that problem?
The cx value is set to 30
What changes do you think we should make in order to solve the problem?
The cx value should be set to half of it's original value so that it'll be aligned to left perfectly.
What alternative solutions did you explore? (Optional)

[github-actions]

user Your proposal will be dismissed because you did not follow the proposal template.

[QasimBham]

Proposal

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

The setting's avatar is not left aligned

What is the root cause of that problem?

The cx value. is set to 30

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

The cx value should be set to half of the original value. This should solve the left alignment icon issue

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[c3024]

Thank you all for your proposals. All correctly identified the Avatar Skeleton Circle centre position as the reason for the mismatch.

As far as my experience and understanding w.r.t. CSS/SVG issues goes, identifying the correct attribute and its accurate value (considering other existing styles/attributes) is seen valuable enough to prioritise a proposal over others.

@bernhardoj 's proposal identifies the circle position exactly to match the loaded avatar position. I think we can go with his proposal.

🎀 👀 🎀 C+ Reviewed

[melvin-bot]

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

[melvin-bot]

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

[bernhardoj]

PR is ready

cc: @c3024

[kadiealexander]

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:

[kadiealexander]

Payouts due:

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

Upwork job is here.

[bernhardoj]

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

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

[JmillsExpensify]

$250 approved for @bernhardoj