[$250] skeleton view goes over the edges of the screen reported by @parasharrajat

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Login to the app on mobile app.
2. Navigate to any report that shows skeleton view.

Expected result:

Skeleton view should have right padding like the left edge of 20px.

Actual:

There is not padding at the right edge of the Skeleton view, it seems to go over the edge.

Workaround:

unknown

Platform:

Where is this issue occurring?

• iOS
• Android
• Mobile Web

Version Number: 1.2.27-4
Reproducible in staging?: y
Reproducible in production?: y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Expensify/Expensify Issue URL:
Issue reported by: @parasharrajat
Slack conversation:
https://expensify.slack.com/archives/C049HHMV9SM/p1668532881726039
View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0104a6f656912f7483
• Upwork Job ID: 1593381015543803904

[melvin-bot]

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

[syedsaroshfarrukhdot]

Proposal :-

We need to increase width to 100% in SkeletonViewLines.js and pass styles.mr5 to SkeletonViewContentLoader

App/src/components/ReportActionsSkeletonView/SkeletonViewLines.js

Line 18 in 652a51a

<Rect x="67" y="31" width="90%" height="8" />

Like This

 <SkeletonViewContentLoader
    height={CONST.CHAT_SKELETON_VIEW.HEIGHT_FOR_ROW_COUNT[props.numberOfRows]}  
    style={styles.mr5}
>
    <Circle cx="40" cy="26" r="20" />
    <Rect x="67" y="11" width="20%" height="8" />
    <Rect x="67" y="31" width="100%" height="8" />
    {props.numberOfRows > 1 && <Rect x="67" y="51" width="50%" height="8" />}
    {props.numberOfRows > 2 && <Rect x="67" y="71" width="50%" height="8" />}
   
</SkeletonViewContentLoader>

After Fixing

Web :-

Native :-

mWeb :-

[parasharrajat]

@shawnborton Can you please review this issue?

[shawnborton]

Yup, that looks good. But do we know why this happened in the first place? There must have been a regression at some point right?

[syedsaroshfarrukhdot]

@shawnborton I looked up and and found that this initial commit in SkeletonViewLines.js 0bfe1ba had created issue on android / IOS. So I believe it wasn't a regression. It might have been overlooked during development.

The issue is there is no initial marginLeft we are setting cx="40" for the eclipse which move eclipse on x-axis and when we give width to Rect to "90%" it creates issue in native platform so we can increase width to "100%" and give marinRight 20 to parent view to achieve the desired Goal of spacing at the right side so it doesn't overflow. My Proposal #12744 (comment)

[melvin-bot]

Current assignee @MitchExpensify is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

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