[$250] Reports - No spinner on receipt thumbnail

[lanitochka17]

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: 9.1.45-15
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: #61764
Issue reported by: Applause - Internal Team

Action Performed:

Precondition: account has several expenses with receipts

1. Navigate to Reports
   2 Make sure you are in Expenses or Expense reports

Expected Result:

The loading spinner displayed for receipt thumbnails.
Default BG color fill for the thumbnail area, and use a 20x20 spinner in the middle of the thumbnail area for these

Actual Result:

No loading spinner displayed for receipt thumbnails

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

Bug6831198_1747239274940.bandicam_2025-05-14_18-50-12-819.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021922808396648832547
• Upwork Job ID: 1922808396648832547
• Last Price Increase: 2025-05-15

Issue Owner

Current Issue Owner: @sobitneupane

[melvin-bot]

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

[M00rish]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-14 22:45:33 UTC.

Proposal

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

Reports - No spinner on receipt thumbnail

What is the root cause of that problem?

no mechanism for showing spinner while loading :

App/src/components/Image/index.tsx

Lines 138 to 156 in f65da19

	if (source === undefined && !!forwardedProps?.waitForSession) {
	return undefined;
	}
	if (source === undefined) {
	return (
	<FullScreenLoadingIndicator
	iconSize={loadingIconSize}
	style={loadingIndicatorStyles}
	/>
	);
	}
	return (
	<BaseImage
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...forwardedProps}
	onLoad={handleLoad}
	style={[style, shouldSetAspectRatioInStyle && aspectRatio ? {aspectRatio, height: 'auto'} : {}, shouldOpacityBeZero && {opacity: 0}]}
	source={source}
	/>

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

add check for this case :

   const [isLoading, setIsLoading] = useState(true);
....

const handleLoad = useCallback(
        (event: ImageOnLoadEvent) => {
            const {width, height} = event.nativeEvent;
          
            onLoad?.(event);
            updateAspectRatio(width, height);
            setIsLoading(false);

....


 return (
        <>
            {isLoading && (
                <FullScreenLoadingIndicator
                    iconSize={loadingIconSize}
                    style={loadingIndicatorStyles}
                />
            )}
            {source !== undefined && (
                <BaseImage
                    {...forwardedProps}
                    onLoad={handleLoad}
                    style={[
                        style,
                        shouldSetAspectRatioInStyle && aspectRatio ? {aspectRatio, height: 'auto'} : {},
                        shouldOpacityBeZero && {opacity: 0},
                    ]}
                    source={source}
                />
            )}
        </>
    );

If source is undefined we could show nothing or just the spinner like current approach... styling could be dealt with later

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)

N/A

[jliexpensify]

cc @Expensify/design to confirm the expected result:

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

[melvin-bot]

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

[melvin-bot]

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

[dubielzyk-expensify]

I think we're in the process of fixing this one on another issue. @shawnborton is involved in it, so I'll let him comment.

[shawnborton]

Yeah, we do indeed have another issue for this: #61073

cc @Valforte @nkdengineer @dominictb for extra eyes

[jliexpensify]

Oh cool, should we close this one?

[dominictb]

Let me chim in to see if it's a regression from my PR. Because I cannot see the spinner on production as well.

[nkdengineer]

I think it's not related to #61073 since we only change the style of the spinner.

[M00rish]

Yeah that's what I thought, the mentioned issue is about styling this one is about spinner not showing on image loading.

[LorenzoBloedow]

@jliexpensify Sorry if this is off-topic, but maybe it'd be worth checking with the design team if we should use our Image component instead of RN's in other places too such as here:

App/src/pages/workspace/WorkspaceOverviewPage.tsx

Line 4 in 84d940b

import {Image, StyleSheet, View} from 'react-native';

Because I'm pretty sure RN's doesn't have a spinner.

Maybe a linter rule to avoid using third-party Image components too?

[shawnborton]

Got it, then we can proceed with this issue to try to figure out why the spinner isn't showing. Strange that it was working at some point but suddenly no longer is though... cc @mountiny @trjExpensify in case you think this has anything to do with TradReports changes.

[trjExpensify]

Mhm, I don't think we've touched those search result rows.

[mountiny]

also not remembering a specific change that could touch this @Kicu @sumo-slonik @Guccio163 maybe you remember

I think we can keep this external

[jliexpensify]

Thanks Vit - still open for proposals everyone! cc @sobitneupane

[Krishna2323]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-15 23:25:30 UTC.

Proposal

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

• Reports - No spinner on receipt thumbnail

What is the root cause of that problem?

• ReceiptImage component uses the Image component and the normal Image component does not have a mechanism for showing the loader when the image is not fully loaded.
  

  App/src/components/ReceiptImage.tsx

  Lines 195 to 203 in 120f6be

  	return (
  	<Image
  	source={{uri: source}}
  	style={[style ?? [styles.w100, styles.h100], styles.overflowHidden]}
  	isAuthTokenRequired={isAuthTokenRequired}
  	loadingIconSize={loadingIconSize}
  	loadingIndicatorStyles={loadingIndicatorStyles}
  	/>
  	);

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

• Instead of using Image, we can use ImageWithSizeCalculation which has a mechanism for showing the loader when the image is not fully loaded.
• We need to replaces this part to:

        <ImageWithSizeCalculation
            url={source ?? ''}
            onMeasure={() => {}}
            style={[style ?? [styles.w100, styles.h100], styles.overflowHidden]}
            isAuthTokenRequired={!!isAuthTokenRequired}
            loadingIconSize={"small"}
        />

• Additionally we need to add accept more props in ImageWithSizeCalculation, like loadingIconSize, loadingIndicatorStyles and pass it to FullscreenLoadingIndicator.
• We also need to make onMeasure prop optional in ImageWithSizeCalculation.
• OPTIONAL: We should not render AttachmentOfflineIndicator when using ImageWithSizeCalculation, so we can add a flag for rendering that conditionally.

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)

• We can move the logic for showing the loading indicator from ImageWithSizeCalculation to Image.

Result

Monosnap.screencast.2025-05-16.04-55-34.mp4