[$250] Skeleton of money request preview has no animation

[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: 1.4.62-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: @dukenv0307
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1712745451877529

Action Performed:

1. Open a DM
2. Create some money requests (4 - 5)
3. Open IOU report and send a message
4. Go back to the DM and send a message?
5. Logout and login again
6. After the DM is loaded go offline
7. Click on report preview to open IOU report

Expected Result:

The IOU preview skeleton should have animation like other skeletons view in the App

Actual Result:

The IOU preview skeleton is displayed without animation

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

Add any screenshot/video evidence

Screen.Recording.2024-04-10.at.17.34.03.mov

Recording.2967.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f1edc0cbcada32a1
• Upwork Job ID: 1779910124229447680
• Last Price Increase: 2024-04-15
• Automatic offers:
• dukenv0307 | Reviewer | 0
• nkdengineer | Contributor | 0

[melvin-bot]

Triggered auto assignment to @sakluger (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]

Proposal

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

The IOU preview skeleton is displayed without animation

What is the root cause of that problem?

The problem is backgroundColor and foregroundColor of MoneyRequestSkeletonView.tsx are the same color. So this skeleton has no animation.

App/src/components/MoneyRequestSkeletonView.tsx

Lines 16 to 17 in 8ae5491

	backgroundColor={theme.borderLighter}
	foregroundColor={theme.border}

App/src/styles/theme/themes/light.ts

Lines 12 to 13 in 8ae5491

	border: colors.productLight400,
	borderLighter: colors.productLight400,

App/src/styles/theme/themes/dark.ts

Lines 12 to 13 in 8ae5491

	border: colors.productDark400,
	borderLighter: colors.productDark400,

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

We should change backgroundColor or foregroundColor to another color. This can be confirmed by design team.

App/src/components/MoneyRequestSkeletonView.tsx

Lines 16 to 17 in 8ae5491

	backgroundColor={theme.borderLighter}
	foregroundColor={theme.border}

Or we can use theme.skeletonLHNIn and theme.skeletonLHNOut as we use for other skeletons of the App.

App/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx

Lines 21 to 22 in 8ae5491

	backgroundColor={theme.skeletonLHNIn}
	foregroundColor={theme.skeletonLHNOut}

What alternative solutions did you explore? (Optional)

We can change the color of border or borderLighter but maybe the color of this is expected.

[dukenv0307]

@sakluger I can take over this as C+ since I'm the reporter of this issue.

[melvin-bot]

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

[melvin-bot]

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

[sakluger]

Thanks @dukenv0307! I assigned you as C+.

[mananjadhav]

Proposal

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

Animation doesn't show up for the money request skeleton preview.

What is the root cause of that problem?

We use the same color for the background and the foreground of the skeleton view as used here

App/src/components/MoneyRequestSkeletonView.tsx

Lines 16 to 17 in 2d19c95

	backgroundColor={theme.borderLighter}
	foregroundColor={theme.border}

and defined here

App/src/styles/theme/themes/light.ts

Lines 12 to 13 in 2d19c95

	border: colors.productLight400,
	borderLighter: colors.productLight400,

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

We should use the following prop values as used at other places such as here.

We should also update the same for CurrentUserPersonalDetailsSkeletonView.

App/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx

Lines 40 to 41 in 02059dd

	backgroundColor={backgroundColor ?? theme.highlightBG}
	foregroundColor={foregroundColor ?? theme.border}

backgroundColor={theme.skeletonLHNIn}
            foregroundColor={theme.skeletonLHNOut}

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.

[dukenv0307]

Let's go with @nkdengineer's solution. There's no problem with CurrentUserPersonalDetailsSkeletonView

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[flodnv]

Sounds good, let's see what the design team says for which color to use.

[melvin-bot]

Triggered auto assignment to @dannymcclain (Design), see these Stack Overflow questions for more details.

[dannymcclain]

Or we can use theme.skeletonLHNIn and theme.skeletonLHNOut as we use for other skeletons of the App.

I think we should do this (mentioned at the bottom of the proposal) to stay consistent with other skeleton loaders in the app. Is there any reason why we wouldn't?

[nkdengineer]

I think we should do this (mentioned at the bottom of #40060 (comment)) to stay consistent with other skeleton loaders in the app.

I agree with this.

[melvin-bot]

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

[melvin-bot]

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

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

This issue has not been updated in over 15 days. @flodnv, @sakluger, @dannymcclain, @dukenv0307, @nkdengineer eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[dukenv0307]

@sakluger The PR was deployed last month. Can you please add Daily label again and process payment here? Thanks.

[sakluger]

Yes, sorry for the delay there. All paid out.