[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
• [X] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/aa5fa5d1-16ad-4d0e-867c-e4a19757e83a

https://github.com/user-attachments/assets/a41403be-2807-4ced-b04b-0e1341b539bd

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

https://github.com/Expensify/App/blob/513e6b3c714adbe24cd8b88c9fc9c20130a6c9d4/src/styles/index.ts#L2828-L2830

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

https://github.com/user-attachments/assets/62fd6120-2b6b-4111-9bdc-a08f4f88a49a

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

https://github.com/Expensify/App/blob/83835702a43ee9299475e406fa7aa10027e05584/src/components/AccountSwitcherSkeletonView/index.tsx#L25

https://github.com/Expensify/App/blob/83835702a43ee9299475e406fa7aa10027e05584/src/components/AccountSwitcherSkeletonView/index.tsx#L36

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. https://github.com/Expensify/App/blob/a5ca9b81ef84ecd57487a98954df52113717eaec/src/components/AccountSwitcherSkeletonView/index.tsx#L35-L36 https://github.com/Expensify/App/blob/a5ca9b81ef84ecd57487a98954df52113717eaec/src/components/AccountSwitcherSkeletonView/index.tsx#L25

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. https://github.com/Expensify/App/blob/a5ca9b81ef84ecd57487a98954df52113717eaec/src/components/AccountSwitcherSkeletonView/index.tsx#L25

const startPositionX = avatarPlaceholderRadius;

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[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[bot]]

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.