Merge pull request #43249 from Krishna2323/krishna2323/issue/42657

fix: mWeb - Chat - Uploading an image while offline briefly shows an offline message in the preview.

Author: arosiclair

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 (
             <View
@@ -213,8 +216,8 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV
                     onLoad={imageLoad}
                     onError={onError}
                 />
-                {((isLoading && !isOffline) || (!isLoading && zoomScale === 0)) && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
-                {isLoading && <AttachmentOfflineIndicator />}
+                {((isLoading && (!isOffline || isLocalFile)) || (!isLoading && zoomScale === 0)) && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
+                {isLoading && !isLocalFile && <AttachmentOfflineIndicator />}
             </View>
         );
     }
@@ -247,8 +250,8 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV
                 />
             </PressableWithoutFeedback>
 
-            {isLoading && !isOffline && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
-            {isLoading && <AttachmentOfflineIndicator />}
+            {isLoading && (!isOffline || isLocalFile) && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
+            {isLoading && !isLocalFile && <AttachmentOfflineIndicator />}
         </View>
     );
 }

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<string, ContentSize | undefined>();
@@ -197,6 +198,8 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan
         [onScaleChangedContext, onScaleChangedProp],
     );
 
+    const isLocalFile = FileUtils.isLocalFile(uri);
+
     return (
         <View
             style={[StyleSheet.absoluteFill, style]}
@@ -248,13 +251,13 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan
                     )}
 
                     {/* Show activity indicator while the lightbox is still loading the image. */}
-                    {isLoading && !isOffline && (
+                    {isLoading && (!isOffline || isLocalFile) && (
                         <ActivityIndicator
                             size="large"
                             style={StyleSheet.absoluteFill}
                         />
                     )}
-                    {isLoading && <AttachmentOfflineIndicator />}
+                    {isLoading && !isLocalFile && <AttachmentOfflineIndicator />}
                 </>
             )}
         </View>

src/libs/ReceiptUtils.ts

@@ -56,7 +56,7 @@ function getThumbnailAndImageURIs(transaction: OnyxEntry<Transaction>, 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};
 }

src/libs/fileDownload/FileUtils.ts

@@ -252,6 +252,13 @@ function validateImageForCorruption(file: FileObject): Promise<void> {
     });
 }
 
+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,
 };

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);