diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx index 2630b82a7ba4..528b3ab1e88f 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx @@ -14,6 +14,7 @@ import Shutter from '@assets/images/shutter.svg'; import type {FileObject} from '@components/AttachmentModal'; import AttachmentPicker from '@components/AttachmentPicker'; import Button from '@components/Button'; +import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import ImageSVG from '@components/ImageSVG'; @@ -67,6 +68,7 @@ function IOURequestStepScan({ const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`); const [cameraPermissionStatus, setCameraPermissionStatus] = useState(null); const [didCapturePhoto, setDidCapturePhoto] = useState(false); + const [isLoadingReceipt, setIsLoadingReceipt] = useState(false); const [pdfFile, setPdfFile] = useState(null); @@ -398,7 +400,13 @@ function IOURequestStepScan({ return; } + // With the image size > 24MB, we use manipulateAsync to resize the image. + // It takes a long time so we should display a loading indicator while the resize image progresses. + if (Str.isImage(originalFile.name ?? '') && (originalFile?.size ?? 0) > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) { + setIsLoadingReceipt(true); + } FileUtils.resizeImageIfNeeded(originalFile).then((file) => { + setIsLoadingReceipt(false); // Store the receipt on the transaction object in Onyx // On Android devices, fetching blob for a file with name containing spaces fails to retrieve the type of file. // So, let us also save the file type in receipt for later use during blob fetch @@ -470,6 +478,7 @@ function IOURequestStepScan({ shouldShowWrapper={!!backTo} testID={IOURequestStepScan.displayName} > + {isLoadingReceipt && } {pdfFile && ( (null); const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`); + const [isLoadingReceipt, setIsLoadingReceipt] = useState(false); const [videoConstraints, setVideoConstraints] = useState(); const tabIndex = 1; @@ -431,7 +433,13 @@ function IOURequestStepScan({ return; } + // With the image size > 24MB, we use manipulateAsync to resize the image. + // It takes a long time so we should display a loading indicator while the resize image progresses. + if (Str.isImage(originalFile.name ?? '') && (originalFile?.size ?? 0) > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) { + setIsLoadingReceipt(true); + } FileUtils.resizeImageIfNeeded(originalFile).then((file) => { + setIsLoadingReceipt(false); // Store the receipt on the transaction object in Onyx const source = URL.createObjectURL(file as Blob); // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing @@ -692,28 +700,31 @@ function IOURequestStepScan({ testID={IOURequestStepScan.displayName} > {(isDraggingOverWrapper) => ( - - {!(isDraggingOver ?? isDraggingOverWrapper) && (Browser.isMobile() ? mobileCameraView() : desktopUploadView())} - { - const file = e?.dataTransfer?.files[0]; - if (file) { - file.uri = URL.createObjectURL(file); - setReceiptAndNavigate(file); - } - }} - receiptImageTopPosition={receiptImageTopPosition} - /> - - + <> + {isLoadingReceipt && } + + {!(isDraggingOver ?? isDraggingOverWrapper) && (Browser.isMobile() ? mobileCameraView() : desktopUploadView())} + { + const file = e?.dataTransfer?.files[0]; + if (file) { + file.uri = URL.createObjectURL(file); + setReceiptAndNavigate(file); + } + }} + receiptImageTopPosition={receiptImageTopPosition} + /> + + + )} );