[Due for payment 2025-08-15] Incorrect Animation Direction for Expense Preview Skeleton

[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:
Reproducible in staging?: Needs Reproduction
Reproducible in production?: Needs Reproduction
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 (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Navigate to any expense report
2. Trigger a loading state for the expense preview (e.g., by switching quickly between expenses)
3. Observe the animation direction of the total skeleton placeholder.

Expected Result:

The skeleton should animate from left to right, consistent with the rest of the UI.

Actual Result:

The total section of the skeleton animates from right to left

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

CleanShot.2025-07-29.at.07.45.23.1.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @abekkala

[melvin-bot]

Triggered auto assignment to @abekkala (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.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[allgandalf]

I can reproduce this bug with the steps in the OP, @abekkala / @mountiny can you please assign me as C+ for this issue according to this slack post

Screen.Recording.2025-07-30.at.1.08.41.AM.mov

The first C+ to post on the GH issue with reliable reproduction steps and video or screenshots confirming reproduction will be assigned as C+.

[thelullabyy]

Proposal

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

Incorrect Animation Direction for Expense Preview Skeleton

What is the root cause of that problem?

The issue is caused by the application of styles.mirror to the skeleton view:

App/src/components/TransactionPreviewSkeletonView.tsx

Line 53 in 4b7e280

<View style={[styles.r0, styles.b0, styles.p4, styles.mtn1, styles.pAbsolute, styles.mirror]}>

This style inadvertently mirrors the animation direction, resulting in a right-to-left effect instead of the intended left-to-right animation.

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

We should remove the styles.mirror from the skeleton view and instead explicitly calculate the x position for the shimmer manually. This can be achieved by updating the value for x as shown below:

App/src/components/TransactionPreviewSkeletonView.tsx

Line 61 in 4b7e280

x="0"

x={typeof width === 'number' ? width - 68 : '100%'} 

This ensures the animation starts from the correct position without relying on mirroring styles.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

[jakubkalinski0]

Since I am already assigned to this issue I will be happy to take this on right now

[allgandalf]

@jakubkalinski0 what's your ETA for the PR?