[$500] [Dev] Infinite receipt loading spinner with backend dev environment

[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: @neil-marcellini
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1719847597306219

Please dm @neil-marcellini on Slack during PDT hours if you would like to test against my dev env.

Action Performed:

1. Open New Expensify running on a backend dev environment (ask an internal engineer to share theirs via ngrok)
2. View an expense with a receipt

Expected Result:

Once the receipt is loaded there won't be a loading spinner

Actual Result:

Once the receipt is loaded there won't be a loading spinner

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

Screen.Recording.2024-07-01.at.8.21.57.AM.mov

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014e28bd547489ae41
• Upwork Job ID: 1807839133623941808
• Last Price Increase: 2024-07-25

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[Taiwrash]

Proposal

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

• The spinner keep rolling after the receipt as loaded and currently not showing the image again

What is the root cause of that problem?

• Width value of the image is undefined and cannot be determined
  App/blob/main/src/components/Image/BaseImage.tsx#L7-L18

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

• Handle the state using the callback and memo correctly by updating the imageLoadedSuccessfully function with

const imageLoadedSuccessfully = useCallback(
    (event: {nativeEvent: ImageLoadEventData}) => {
        if (!onLoad) {
            return;
        }

        // We override `onLoad`, so both web and native have the same signature
        const source = event.nativeEvent.source;
        if (source && typeof source === 'object') {
            const {width, height} = source;
            onLoad({nativeEvent: {width, height}});
        } else {
            // Handle the case where source is undefined or not an object
            console.warn('Image source is undefined or not an object');
            onLoad({nativeEvent: {width: 0, height: 0}}); 
        }
    },
    [onLoad],
);

What alternative solutions did you explore? (Optional)

[ishpaul777]

This might be dupe of #44566, I can also reproduce with stag/prod server, setting USE_REACT_STRICT_MODE=false in CONFIG.js should resolve the issue temporarily.