[$250] Receipt Loading Spinners on Reports Page Are Too Large

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number:
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 (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Navigate to reports
2. Make sure you are in Expenses or Expense reports
3. Observe the loading spinner displayed for receipt thumbnails

Expected Result:

Default BG color fill for the thumbnail area, and use a 20x20 spinner in the middle of the thumbnail area for these

Actual Result:

Receipt loading spinners on the Reports page currently appear oversized

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021919892449136201950
• Upwork Job ID: 1919892449136201950
• Last Price Increase: 2025-05-06
• Automatic offers:
• dominictb | Reviewer | 107235748
• nkdengineer | Contributor | 107235749

Issue Owner

Current Issue Owner: @Valforte

[melvin-bot]

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

Receipt loading spinners on the Reports page currently appear oversized

What is the root cause of that problem?

The loading indicator has size large and fullScreenLoading has bg color is different from default bg color

App/src/components/FullscreenLoadingIndicator.tsx

Lines 15 to 20 in f950eb9

	<View style={[StyleSheet.absoluteFillObject, styles.fullScreenLoading, style]}>
	<ActivityIndicator
	color={theme.spinner}
	size="large"
	/>
	</View>

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

We should define an iconSize prop on FullscreenLoadingIndicator and a loadingStyle on Image component.

App/src/components/FullscreenLoadingIndicator.tsx

Lines 15 to 20 in f950eb9

	<View style={[StyleSheet.absoluteFillObject, styles.fullScreenLoading, style]}>
	<ActivityIndicator
	color={theme.spinner}
	size="large"
	/>
	</View>

Then pass it down from here and here to here with iconSize is small to match with design size and loadingStyle is styles.bgTransparent to not override the background color of the receipt cell

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

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

[github-actions]

⚠️ @nkdengineer Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[FitseTLT]

@shawnborton Can you elaborate this part?

Default BG color fill for the thumbnail area,

[shawnborton]

I added mockups to the "expected results" portion of the OP, that's what we want here, cc @Expensify/design for viz!

[nkdengineer]

@shawnborton The background is the same as the thumbnail image like this, right

[shawnborton]

Correct!

[nkdengineer]

Thanks, got it.

[nabi-ebrahimi]

Proposal

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

Receipt loading spinners on the Reports page currently appear too large and are visually inconsistent with the expected design for thumbnail areas.

What is the root cause of that problem?

The default loading spinner rendered by the Image component is large (size="large") and not well-contained visually due to the opaque or styled background of the wrapper View. Without a transparent background and appropriate size control, the spinner appears oversized and distracting within the compact thumbnail cell.

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

We should make two focused changes:

1. Apply a transparent background to the View wrapping ReceiptImage by adding styles.bgTransparent. This allows the loading spinner to be displayed cleanly without clashing with the existing background styles.

2. Introduce a loadingIndicatorSize prop to the ReceiptImage and pass it down to the underlying Image component. This lets us override the default spinner size and explicitly set it to "small" (i.e. 20x20) for thumbnails.

Updated ReceiptCell View: here

<View
    style={[
        StyleUtils.getWidthAndHeightStyle(variables.h36, variables.w40),
        StyleUtils.getBorderRadiusStyle(variables.componentBorderRadiusSmall),
        styles.overflowHidden,
        backgroundStyles,
        styles.bgTransparent
    ]}
>
    <ReceiptImage
        ...
        loadingIndicatorSize="small"
    />
</View>

Changes to Image component:

• Accept and use loadingIndicatorSize ('small' | 'large') when rendering the ActivityIndicator.

<ActivityIndicator
    color={theme.spinner}
    size={loadingIndicatorSize ?? 'large'} // default remains 'large'
/>

This keeps the design consistent while offering flexibility for other usages of the Image component.

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)

[melvin-bot]

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

[melvin-bot]

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

[dominictb]

Based on the mockup, we need to apply transparent background to the underlying FullScreenLoadingIndicator, not to the ReceiptCell wrapper, otherwise it would look like this:

@nkdengineer proposal LGTM

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[Valforte]

Let's move forward with @nkdengineer proposal!

[melvin-bot]

📣 @dominictb 🎉 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 📖