Merge pull request Expensify#90670 from callstack-internal/perf/optimize-receipt-thumbnail-gate

perf: Skip thumbnail encode on receipt capture

Author: cristipaval

src/CONST/index.ts

@@ -314,6 +314,10 @@ const CONST = {
         PHOTO_WIDTH: 4032,
         PHOTO_HEIGHT: 3024,
         PHOTO_ASPECT_RATIO: 4 / 3,
+        // Limit how long the shutter handler waits for thumbnail pre-generation before navigating
+        // to the confirmation screen. Past this, we navigate and let the confirm-side hook
+        // generate the thumbnail lazily (brief source swap is acceptable).
+        THUMBNAIL_NAV_TIMEOUT_MS: 150,
     },
 
     API_ATTACHMENT_VALIDATIONS: {
@@ -2023,6 +2027,7 @@ const CONST = {
         SPAN_ENTRY_TO_SCAN_NAVIGATION: 'ManualEntryToScanNavigation',
         SPAN_ENTRY_TO_SCAN_READY: 'ManualEntryToScanReady',
         SPAN_SHUTTER_TO_CONFIRMATION: 'ManualShutterToConfirmation',
+        SPAN_THUMBNAIL_GATE: 'ManualThumbnailGate',
         SPAN_RECEIPT_CAPTURE: 'ManualReceiptCapture',
         SPAN_SCAN_PROCESS_AND_NAVIGATE: 'ManualScanProcessAndNavigate',
         SPAN_CONFIRMATION_MOUNT: 'ManualConfirmationMount',

src/hooks/useLocalReceiptThumbnail.ts

@@ -21,29 +21,26 @@ function releaseUri(uri: string) {
 }
 
 /**
- * Pre-populate the thumbnail cache so the confirm screen can use it
+ * Pre-populate the receipt-image cache so the confirm screen can use it
  * synchronously on first render, avoiding any source swap / flash.
  */
-function pregenerateThumbnail(sourceUri: string): Promise<string | undefined> {
+function precacheReceiptImage(sourceUri: string): Promise<string | undefined> {
     if (thumbnailCache.has(sourceUri)) {
         return Promise.resolve(thumbnailCache.get(sourceUri));
     }
-    return generateThumbnail(sourceUri).then((uri) => {
-        if (uri) {
-            thumbnailCache.set(sourceUri, uri);
-            // Pre-decode the thumbnail in the native image pipeline so the
-            // confirmation screen can display it instantly without decode latency.
-            Image.prefetch(uri);
-        }
-        return uri;
-    });
+    thumbnailCache.set(sourceUri, sourceUri);
+    // Pre-decode the image in the native image pipeline so the
+    // confirmation screen can display it instantly without decode latency.
+    return Image.prefetch(sourceUri)
+        .then(() => sourceUri)
+        .catch(() => sourceUri);
 }
 
 /**
- * Returns a cached low-resolution thumbnail for a local receipt image.
- * The thumbnail should be pre-generated via `pregenerateThumbnail` before
- * navigating to the confirm screen. If it wasn't, this hook generates it
- * as a fallback, but in that case a source swap (flash) may occur.
+ * Returns a cached receipt image URI for a local receipt. The image should be
+ * pre-cached via `precacheReceiptImage` before navigating to the confirm screen.
+ * If it wasn't, this hook generates a thumbnail as a fallback, but in that case
+ * a source swap (flash) may occur.
  */
 function useLocalReceiptThumbnail(sourceUri: string | undefined, isLocalFile: boolean): {thumbnailUri: string | undefined; isGenerating: boolean} {
     const [asyncResult, setAsyncResult] = useState<{source: string; uri?: string; done: boolean} | undefined>();
@@ -109,5 +106,5 @@ function useLocalReceiptThumbnail(sourceUri: string | undefined, isLocalFile: bo
     return {thumbnailUri, isGenerating};
 }
 
-export {pregenerateThumbnail};
+export {precacheReceiptImage};
 export default useLocalReceiptThumbnail;

src/pages/iou/request/step/IOURequestStepScan/hooks/useCapturePhoto.ts

@@ -4,7 +4,7 @@ import {Alert} from 'react-native';
 import {RESULTS} from 'react-native-permissions';
 import type {Camera, PhotoFile} from 'react-native-vision-camera';
 import useLocalize from '@hooks/useLocalize';
-import {pregenerateThumbnail} from '@hooks/useLocalReceiptThumbnail';
+import {precacheReceiptImage} from '@hooks/useLocalReceiptThumbnail';
 import getPhotoSource from '@libs/fileDownload/getPhotoSource';
 import getReceiptsUploadFolderPath from '@libs/getReceiptsUploadFolderPath';
 import Log from '@libs/Log';
@@ -203,9 +203,21 @@ function useCapturePhoto({
                 }
 
                 // Fire Onyx merge immediately (non-blocking) while we await thumbnail generation.
-                // Both run in parallel — navigation proceeds once the thumbnail is cached.
+                // Limit the wait to THUMBNAIL_NAV_TIMEOUT_MS so a slow encode can't block navigation —
+                // the confirm-screen hook (`useLocalReceiptThumbnail`) generates lazily on mount as a fallback.
                 setMoneyRequestReceipt(transactionID, source, filename, !isEditing, 'image/jpeg');
-                pregenerateThumbnail(source).then(() => {
+                startSpan(CONST.TELEMETRY.SPAN_THUMBNAIL_GATE, {
+                    name: CONST.TELEMETRY.SPAN_THUMBNAIL_GATE,
+                    op: CONST.TELEMETRY.SPAN_THUMBNAIL_GATE,
+                    parentSpan: getSpan(CONST.TELEMETRY.SPAN_SHUTTER_TO_CONFIRMATION),
+                });
+                Promise.race([
+                    precacheReceiptImage(source),
+                    new Promise((resolve) => {
+                        setTimeout(resolve, CONST.RECEIPT_CAMERA.THUMBNAIL_NAV_TIMEOUT_MS);
+                    }),
+                ]).then(() => {
+                    endSpan(CONST.TELEMETRY.SPAN_THUMBNAIL_GATE);
                     submitReceipts(newReceiptFiles);
                 });
             })