[$250] 'Hmm... it's not here' error displayed before loading the receipt that can't be accessed

[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: 1.4.57-2 Reproducible in staging?: Y Reproducible in production?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: N/A Issue reported by: Applause - Internal Team

Issue found when executing PR https://github.com/Expensify/App/pull/38982

Action Performed:

1. Open an invalid receipt page (e.g., https://staging.new.expensify.com/r/1/transaction/1/receipt )
2. Close it and open again
3. Notice error displaying before loading

Expected Result:

'Hmm... it's not here' error should not be displayed before the loading

Actual Result:

'Hmm... it's not here' error displayed before the loading

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [x] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/78819774/fccb988f-d7c0-438f-8c87-e9bd0396b36b

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b7228187c899cbc1
• Upwork Job ID: 1773362875794010112
• Last Price Increase: 2024-03-28

[melvin-bot[bot]]

Triggered auto assignment to @twisterdotcom (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[lanitochka17]

@twisterdotcom FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[bernhardoj]

Proposal

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

Not found page is shown briefly before the loading indicator when visiting invalid transaction receipt page.

What is the root cause of that problem?

This issue will happen after at least we visit it once. The not found view will be shown when if shouldShowNotFoundPage is true and isLoading is false. https://github.com/Expensify/App/blob/9dde2d57b3fd9bbadf20d23fd8dea9efb30a81a1/src/components/AttachmentModal.tsx#L513-L524

The problematic one here is the isLoading value, specifically reportMetadata?.isLoadingInitialReportActions. https://github.com/Expensify/App/blob/9dde2d57b3fd9bbadf20d23fd8dea9efb30a81a1/src/pages/TransactionReceiptPage.tsx#L61-L62

When we open the receipt page, we do an OpenReport request, which will set the reportMetadata.isLoadingInitialReportActions. https://github.com/Expensify/App/blob/9dde2d57b3fd9bbadf20d23fd8dea9efb30a81a1/src/pages/TransactionReceiptPage.tsx#L39-L46

It takes time for the onyx to merge the loading value to true, so reportMetadata?.isLoadingInitialReportActions is false for a while. This doesn't happen for the first time because reportMetadata?.isLoadingInitialReportActions doesn't exist and we have default props with a value of true. https://github.com/Expensify/App/blob/9dde2d57b3fd9bbadf20d23fd8dea9efb30a81a1/src/pages/TransactionReceiptPage.tsx#L28

It happens on web too, but the change from not found view to loading view is really quick.

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

For the reportMetadata, we can set initWithStoredValues to false so we always use the default value. https://github.com/Expensify/App/blob/9dde2d57b3fd9bbadf20d23fd8dea9efb30a81a1/src/pages/TransactionReceiptPage.tsx#L76-L78

However, initWithStoredValues is currently broken because we initialize all the onyx values from the cached value, even if we set initWithStoredValues as false.

To fix it, we should initialize the onyx key only if initWithStoredValues is true.

if (mapping.initWithStoredValues && ((value !== undefined && !Onyx.hasPendingMergeForKey(key)) || mapping.allowStaleData)) {
    // eslint-disable-next-line no-param-reassign
    resultObj[propertyName] = value;
}

[twisterdotcom]

I can't actually recreate this: v1.4.57-2

https://github.com/Expensify/App/assets/9133401/9b9b52d1-e0b7-4256-b56a-ff470bba2469

[bernhardoj]

@twisterdotcom It's easier to reproduce it on Android

[twisterdotcom]

Ah I do see. I'm going to make this Android only.

https://github.com/Expensify/App/assets/9133401/a34acc15-888c-4f4d-ae6d-c4b62179c07b

[twisterdotcom]

Bit of an obscure one, and unlikely to affect many folks, so gonna put it in VIP VSB, but at $250 and Weekly

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Upwork job price has been updated to $250

[nkdengineer]

Proposal

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

Workspace settings page can not be open, nothing happens when click on workspace

What is the root cause of that problem?

When the reportMetadata?.isLoadingInitialReportActions here is false (because the openReport was already called once) and there's no transaction, the isLoading there will be false and it will show NotFoundPage due to this logic.

Subsequently, the openReport here is triggered, leading to isLoading becomes true, the loading indicator shows and then when the API request completes, it show not found page again.

So the root cause here is that we didn't set isLoading properly, it's now purely based on the isLoadingInitialReportActions which doesn't really correlate with transaction loading status.

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

In here, we should have a local state isLoading to keep the page loading status, which will default to true, then we'll only set it to false if isLoadingInitialReportActions turns from true to false (meaning the report was just loaded)

const [isLoading, setIsLoading] = useState(true);
const prevIsLoadingInitialReportActions = usePrevious(reportMetadata?.isLoadingInitialReportActions)

useEffect(() => {
    if (!!transaction || (!reportMetadata?.isLoadingInitialReportActions && prevIsLoadingInitialReportActions)) {
        setIsLoading(false);
    }
}, [reportMetadata?.isLoadingInitialReportActions, transaction]);

Then we can use that isLoading here.

We cannot use initWithStoredValues as suggested in the above proposal because that will mean whenever isLoadingInitialReportActions changes (even in other pages/flows), the loading indicator will show again, for example: If we open the invalid transaction receipt in 1 tab, which will show not found page, then we open the report (with the same reportID as the invalid transaction receipt URL) in a second tab, the invalid transaction receipt will suddenly show loading again, even though the user didn't act on that tab at all. So the loading state of the transaction receipt page should be independent from the reportMetadata?.isLoadingInitialReportActions.

Also that approach seems to be a workaround because the isLoadingInitialReportActions was indeed false when we open the page, but we're assuming it to be true initially, so the bug will easily occur again in future refactors when we remove initWithStoredValues or pass the isLoadingInitialReportActions as prop from another page.

What alternative solutions did you explore? (Optional)

NA

[hoangzinh]

@bernhardoj @nkdengineer thanks for proposals, everyone. Does anyone know why it only happen in Android native?

[bernhardoj]

On web, it's unnoticeable.

https://github.com/Expensify/App/assets/50919443/b2c5dc4d-b415-4822-8317-43ce9de565f9

Actually, I can't notice it anymore on Android too.

[hoangzinh]

@bernhardoj I still notice the bug on Android if I revisit the chat and open the link (At 17s in recording)

https://github.com/Expensify/App/assets/9639873/103ee118-93b3-444c-be3b-e736f90c7889

[bernhardoj]

Hmm, I'm still can't see it anymore.

https://github.com/Expensify/App/assets/50919443/da3b75c2-4665-4b3f-b62e-f79b76447509

[hoangzinh]

Thanks for actively testing on this issue, @bernhardoj @twisterdotcom @lanitochka17 @nkdengineer Could anyone please re-test this bug on Android again if you can still reproduce this bug or just me? Thanks

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[lanitochka17]

@hoangzinh Its is working fine now

https://github.com/Expensify/App/assets/78819774/3329f7f2-25b5-4bf9-bd2f-f319a3cb45cb

[twisterdotcom]

Okay, let's close.