fix: reduce INP latency for receipt image interactions#96089
fix: reduce INP latency for receipt image interactions#96089nabi-ebrahimi wants to merge 1 commit into
Conversation
Codecov Report❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.
|
melvin-bot
Bot
requested review from
marufsharifi and
trjExpensify
and removed request for
a team
|
@marufsharifi Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| // While the receipt is regenerating its stored URL is stale, so draw the live route from `routes.coordinates` | ||
| // (via `ConfirmedRoute`) instead of loading the now-404'd image. | ||
| const showMapAsImage = isMapDistanceRequest && (hasErrors || hasPendingDistanceReceiptRegeneration(transaction)); | ||
| const navigateToReceipt = useCallback(() => { |
There was a problem hiding this comment.
❌ CLEAN-REACT-PATTERNS-0 (docs)
React Compiler is enabled in this codebase and automatically memoizes closures based on their captured variables. This useCallback wrapping navigateToReceipt is redundant with the compiler's own memoization — the previous inline onPress arrow was already compiler-friendly. Manual memoization adds a dependency array that must be maintained and can interfere with the compiler's optimization model. (Note: this file could not be verified with the compliance check in this environment; disregard if it fails to compile.)
Remove the useCallback wrapper and let the compiler memoize the plain function:
const navigateToReceipt = () => {
const navigate = () => {
Navigation.navigate(
ROUTES.TRANSACTION_RECEIPT.getRoute(
transactionThreadReport?.reportID ?? contextReport?.reportID ?? reportProp?.reportID ?? getReportIDForExpense(transaction),
transaction?.transactionID,
readonly,
mergeTransactionID,
),
);
};
if (getPlatform() !== CONST.PLATFORM.WEB) {
navigate();
return;
}
requestAnimationFrame(() => {
requestAnimationFrame(navigate);
});
};Reviewed at: 19ff172 | Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
| mergeTransactionID, | ||
| ), | ||
| ); | ||
| }; |
There was a problem hiding this comment.
❌ CONSISTENCY-1 (docs)
The getPlatform() !== CONST.PLATFORM.WEB check embeds platform-specific behavior directly inside the component: web navigates after a double requestAnimationFrame, while all other platforms navigate immediately. Mixing platform branching into the component increases maintenance overhead and platform-specific bug risk. Separating platform concerns keeps the component logic uniform and easier to reason about.
Move the platform-specific scheduling into a dedicated platform-specific file (e.g. a deferNavigation.web.ts / deferNavigation.ts helper) so the component calls a single API without a getPlatform() branch:
// deferNavigation.ts (native/default)
function deferNavigation(navigate: () => void) {
navigate();
}
// deferNavigation.web.ts
function deferNavigation(navigate: () => void) {
requestAnimationFrame(() => {
requestAnimationFrame(navigate);
});
}
// in the component:
const navigateToReceipt = () => {
deferNavigation(() => {
Navigation.navigate(/* ... */);
});
};Reviewed at: 19ff172 | Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
|
@nabi-ebrahimi, could you please address the AI comments? |
2 participants
Explanation of Change
This PR improves the slow
Receipt-ImageINP interaction on web.The
Receipt-Imageinteraction happens when a user taps a receipt image inReportActionItemImageto open the receipt preview modal. Previously, the press handler navigated to the receipt modal immediately, so heavier modal navigation work could begin before the browser had a chance to paint the receipt click feedback.This PR moves the receipt modal navigation into a stable callback and, on web, defers the
Navigation.navigate()call until after a doublerequestAnimationFrame()paint boundary. This gives the browser an opportunity to paint after the receipt click before starting the heavier modal navigation work. Native platforms keep the existing immediate navigation behavior.Fixed Issues
$ #85595
PROPOSAL: #85595 (comment)
Tests
First, build the app for the web.
Open the app in Chrome with the Web Vitals extension enabled.
Navigate to a report that has an expense with a receipt image.
Refresh the page to reset the current page INP measurement.
Click the receipt image to open the receipt preview modal.
After the receipt modal opens, check the Web Vitals extension and record the INP value for the receipt image interaction.
Do not measure the Back/Close interaction as part of this test. Record the receipt image result before clicking Back.
Repeat the same steps before and after the change for comparison.
Verify that the receipt preview modal opens successfully and the Receipt-Image interaction on the web shows improved INP (or no regression compared to the baseline). The Back/Close interaction should be excluded from this measurement.
Offline tests
Same as Tests.
QA Steps
Same as Tests.
// TODO: These must be filled out, or the issue title must include "[No QA]."
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectionAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Screen.Recording.2026-07-15.at.10.57.03.AM.mov
Android: mWeb Chrome
Screen_Recording_20260715_115043_Chrome.mp4
iOS: Native
Screen.Recording.2026-07-15.at.11.52.29.AM.mov
iOS: mWeb Safari
Screen.Recording.2026-07-15.at.11.56.41.AM.mov
MacOS: Chrome / Safari
Screencast.From.2026-07-15.10-05-10.mp4