Fix 49974 attachment infinite loading

src/components/Attachments/AttachmentCarousel/CarouselItem.tsx

@@ -4,6 +4,7 @@ import {View} from 'react-native';
 import AttachmentView from '@components/Attachments/AttachmentView';
 import type {Attachment} from '@components/Attachments/types';
 import Button from '@components/Button';
+import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import Text from '@components/Text';
@@ -83,6 +84,7 @@ function CarouselItem({item, onPress, isFocused, isModalHovered}: CarouselItemPr
                     isHovered={isModalHovered}
                     isFocused={isFocused}
                     duration={item.duration}
+                    fallbackSource={Expensicons.AttachmentNotFound}
                 />
             </View>
 

src/components/Attachments/AttachmentView/index.tsx

@@ -10,6 +10,7 @@ import EReceipt from '@components/EReceipt';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import ScrollView from '@components/ScrollView';
+import Text from '@components/Text';
 import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -127,7 +128,7 @@ function AttachmentView({
 
     const [imageError, setImageError] = useState(false);
 
-    useNetwork({onReconnect: () => setImageError(false)});
+    const {isOffline} = useNetwork({onReconnect: () => setImageError(false)});
 
     useEffect(() => {
         FileUtils.getFileResolution(file).then((resolution) => {
@@ -226,15 +227,20 @@ function AttachmentView({
     if (isFileImage) {
         if (imageError && (typeof fallbackSource === 'number' || typeof fallbackSource === 'function')) {
             return (
-                <Icon
-                    src={fallbackSource}
-                    height={variables.defaultAvatarPreviewSize}
-                    width={variables.defaultAvatarPreviewSize}
-                    additionalStyles={[styles.alignItemsCenter, styles.justifyContentCenter, styles.flex1]}
-                    fill={theme.border}
-                />
+                <View style={[styles.flexColumn, styles.alignItemsCenter, styles.justifyContentCenter]}>
+                    <Icon
+                        src={fallbackSource}
+                        width={variables.iconSizeSuperLarge}
+                        height={variables.iconSizeSuperLarge}
+                        fill={theme.icon}
+                    />
+                    <View>
+                        <Text style={[styles.notFoundTextHeader]}>{translate('attachmentView.attachmentNotFound')}</Text>
+                    </View>
+                </View>
             );
         }
+
         let imageSource = imageError && fallbackSource ? (fallbackSource as string) : (source as string);
 
         if (isHighResolution) {
@@ -268,6 +274,9 @@ function AttachmentView({
                         isImage={isFileImage}
                         onPress={onPress}
                         onError={() => {
+                            if (isOffline) {
+                                return;
+                            }
                             setImageError(true);
                         }}
                     />

src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx

@@ -1,4 +1,4 @@
 import React, {memo, useState} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {CustomRendererProps, TBlock} from 'react-native-render-html';
@@ -67,7 +67,6 @@
 
     const fileType = FileUtils.getFileType(attachmentSourceAttribute);
     const fallbackIcon = fileType === CONST.ATTACHMENT_FILE_TYPE.FILE ? Expensicons.Document : Expensicons.GalleryNotFound;
-    const [hasLoadFailed, setHasLoadFailed] = useState(true);
     const theme = useTheme();
 
     const thumbnailImageComponent = (
@@ -80,8 +79,6 @@
             imageHeight={imageHeight}
             isDeleted={isDeleted}
             altText={alt}
-            onLoadFailure={() => setHasLoadFailed(true)}
-            onMeasure={() => setHasLoadFailed(false)}
             fallbackIconBackground={theme.highlightBG}
             fallbackIconColor={theme.border}
         />
@@ -113,7 +110,6 @@
                             shouldUseHapticsOnLongPress
                             accessibilityRole={CONST.ROLE.BUTTON}
                             accessibilityLabel={translate('accessibilityHints.viewAttachment')}
-                            disabled={hasLoadFailed}
                         >
                             {thumbnailImageComponent}
                         </PressableWithoutFocus>

src/components/Icon/Expensicons.ts

@@ -8,6 +8,7 @@ import ArrowRight from '@assets/images/arrow-right.svg';
 import ArrowUpLong from '@assets/images/arrow-up-long.svg';
 import UpArrow from '@assets/images/arrow-up.svg';
 import ArrowsUpDown from '@assets/images/arrows-updown.svg';
+import AttachmentNotFound from '@assets/images/attachment-not-found.svg';
 import AdminRoomAvatar from '@assets/images/avatars/admin-room.svg';
 import AnnounceRoomAvatar from '@assets/images/avatars/announce-room.svg';
 import ConciergeAvatar from '@assets/images/avatars/concierge-avatar.svg';
@@ -216,6 +217,7 @@ export {
     ArrowsUpDown,
     ArrowUpLong,
     ArrowDownLong,
+    AttachmentNotFound,
     Wrench,
     BackArrow,
     Bank,

src/components/ImageView/index.tsx

@@ -196,8 +196,12 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV
             document.removeEventListener('mouseup', trackPointerPosition);
         };
     }, [canUseTouchScreen, trackMovement, trackPointerPosition]);
-
-    const isLocalFile = FileUtils.isLocalFile(url);
+    // isLocalToUserDeviceFile means the file is located on the user device,
+    // not loaded on the server yet (the user is offline when loading this file in fact)
+    let isLocalToUserDeviceFile = FileUtils.isLocalFile(url);
+    if (isLocalToUserDeviceFile && typeof url === 'string' && url.startsWith('/chat-attachments')) {
+        isLocalToUserDeviceFile = false;
+    }
 
     if (canUseTouchScreen) {
         return (
@@ -238,8 +242,8 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV
                 />
             </PressableWithoutFeedback>
 
-            {isLoading && (!isOffline || isLocalFile) && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
-            {isLoading && !isLocalFile && <AttachmentOfflineIndicator />}
+            {isLoading && (!isOffline || isLocalToUserDeviceFile) && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
+            {isLoading && !isLocalToUserDeviceFile && <AttachmentOfflineIndicator />}
         </View>
     );
 }

src/languages/en.ts

@@ -1964,6 +1964,7 @@ const translations = {
             afterLinkText: 'to view it.',
             formLabel: 'View PDF',
         },
+        attachmentNotFound: 'Attachment not found',
     },
     messages: {
         errorMessageInvalidPhone: `Please enter a valid phone number without brackets or dashes. If you're outside the US, please include your country code (e.g. ${CONST.EXAMPLE_PHONE_NUMBER}).`,

src/languages/es.ts

@@ -1984,6 +1984,7 @@ const translations = {
             afterLinkText: 'para verlo.',
             formLabel: 'Ver PDF',
         },
+        attachmentNotFound: 'Archivo adjunto no encontrado',
     },
     messages: {
         errorMessageInvalidPhone: `Por favor, introduce un número de teléfono válido sin paréntesis o guiones. Si reside fuera de Estados Unidos, por favor incluye el prefijo internacional (p. ej. ${CONST.EXAMPLE_PHONE_NUMBER}).`,