diff --git a/src/components/ImageView/index.tsx b/src/components/ImageView/index.tsx index f08941ef7d77..c74d9bd5aa52 100644 --- a/src/components/ImageView/index.tsx +++ b/src/components/ImageView/index.tsx @@ -12,6 +12,7 @@ import useNetwork from '@hooks/useNetwork'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; +import * as FileUtils from '@libs/fileDownload/FileUtils'; import CONST from '@src/CONST'; import viewRef from '@src/types/utils/viewRef'; import type ImageViewProps from './types'; @@ -195,6 +196,8 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV }; }, [canUseTouchScreen, trackMovement, trackPointerPosition]); + const isLocalFile = FileUtils.isLocalFile(url); + if (canUseTouchScreen) { return ( - {((isLoading && !isOffline) || (!isLoading && zoomScale === 0)) && } - {isLoading && } + {((isLoading && (!isOffline || isLocalFile)) || (!isLoading && zoomScale === 0)) && } + {isLoading && !isLocalFile && } ); } @@ -247,8 +250,8 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV /> - {isLoading && !isOffline && } - {isLoading && } + {isLoading && (!isOffline || isLocalFile) && } + {isLoading && !isLocalFile && } ); } diff --git a/src/components/Lightbox/index.tsx b/src/components/Lightbox/index.tsx index 0be0171eaa9a..ea10e104a59d 100644 --- a/src/components/Lightbox/index.tsx +++ b/src/components/Lightbox/index.tsx @@ -12,6 +12,7 @@ import {getCanvasFitScale} from '@components/MultiGestureCanvas/utils'; import useNetwork from '@hooks/useNetwork'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as FileUtils from '@libs/fileDownload/FileUtils'; import NUMBER_OF_CONCURRENT_LIGHTBOXES from './numberOfConcurrentLightboxes'; const cachedImageDimensions = new Map(); @@ -197,6 +198,8 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan [onScaleChangedContext, onScaleChangedProp], ); + const isLocalFile = FileUtils.isLocalFile(uri); + return ( )} - {isLoading && } + {isLoading && !isLocalFile && } )} diff --git a/src/libs/ReceiptUtils.ts b/src/libs/ReceiptUtils.ts index b3892d20162f..b42a23e215bf 100644 --- a/src/libs/ReceiptUtils.ts +++ b/src/libs/ReceiptUtils.ts @@ -56,7 +56,7 @@ function getThumbnailAndImageURIs(transaction: OnyxEntry, receiptPa return {thumbnail: `${path.substring(0, path.length - 4)}.jpg.1024.jpg`, image: path, filename}; } - const isLocalFile = typeof path === 'number' || path.startsWith('blob:') || path.startsWith('file:') || path.startsWith('/'); + const isLocalFile = FileUtils.isLocalFile(path); const {fileExtension} = FileUtils.splitExtensionFromFileName(filename); return {isThumbnail: true, fileExtension: Object.values(CONST.IOU.FILE_TYPES).find((type) => type === fileExtension), image: path, isLocalFile, filename}; } diff --git a/src/libs/fileDownload/FileUtils.ts b/src/libs/fileDownload/FileUtils.ts index f058ce0f80d8..0ce33a02f95d 100644 --- a/src/libs/fileDownload/FileUtils.ts +++ b/src/libs/fileDownload/FileUtils.ts @@ -252,6 +252,13 @@ function validateImageForCorruption(file: FileObject): Promise { }); } +function isLocalFile(receiptUri?: string | number): boolean { + if (!receiptUri) { + return false; + } + return typeof receiptUri === 'number' || receiptUri?.startsWith('blob:') || receiptUri?.startsWith('file:') || receiptUri?.startsWith('/'); +} + export { showGeneralErrorAlert, showSuccessAlert, @@ -264,5 +271,6 @@ export { appendTimeToFileName, readFileAsync, base64ToFile, + isLocalFile, validateImageForCorruption, }; diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx index 1683ef3e3df2..d5dafa58cd9e 100644 --- a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx +++ b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx @@ -13,6 +13,7 @@ import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; +import * as FileUtils from '@libs/fileDownload/FileUtils'; import getCurrentPosition from '@libs/getCurrentPosition'; import * as IOUUtils from '@libs/IOUUtils'; import Log from '@libs/Log'; @@ -204,7 +205,7 @@ function IOURequestStepConfirmation({ // skip this in case user is moving the transaction as the receipt path will be valid in that case useEffect(() => { // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - const isLocalFile = typeof receiptPath === 'number' || receiptPath?.startsWith('blob:') || receiptPath?.startsWith('file:') || receiptPath?.startsWith('/'); + const isLocalFile = FileUtils.isLocalFile(receiptPath); if (!isLocalFile) { setReceiptFile(transaction?.receipt);