Merge pull request #52195 from Kalydosos/fixN3-49974-attachment-infin…

…ite-loading fix-49974-attachment-infinite-loading
Expensify · Nov 13, 2024 · 4d9be4e · 4d9be4e
2 parents c24d217 + 17c7206
commit 4d9be4e
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 17 deletions.
diff --git a/assets/images/attachment-not-found.svg b/assets/images/attachment-not-found.svg
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx b/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>
 

diff --git a/src/components/Attachments/AttachmentView/index.tsx b/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);
                         }}
                     />

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
@@ -1,4 +1,4 @@
-import React, {memo, useState} from 'react';
+import React, {memo} 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 @@ function ImageRenderer({tnode}: ImageRendererProps) {
 
     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();
 
     let fileName = htmlAttribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || FileUtils.getFileName(`${isAttachmentOrReceipt ? attachmentSourceAttribute : htmlAttribs.src}`);
@@ -86,8 +85,6 @@ function ImageRenderer({tnode}: ImageRendererProps) {
             imageHeight={imageHeight}
             isDeleted={isDeleted}
             altText={alt}
-            onLoadFailure={() => setHasLoadFailed(true)}
-            onMeasure={() => setHasLoadFailed(false)}
             fallbackIconBackground={theme.highlightBG}
             fallbackIconColor={theme.border}
         />
@@ -119,7 +116,6 @@ function ImageRenderer({tnode}: ImageRendererProps) {
                             shouldUseHapticsOnLongPress
                             accessibilityRole={CONST.ROLE.BUTTON}
                             accessibilityLabel={translate('accessibilityHints.viewAttachment')}
-                            disabled={hasLoadFailed}
                         >
                             {thumbnailImageComponent}
                         </PressableWithoutFocus>

diff --git a/src/components/Icon/Expensicons.ts b/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';
@@ -217,6 +218,7 @@ export {
     ArrowsUpDown,
     ArrowUpLong,
     ArrowDownLong,
+    AttachmentNotFound,
     Wrench,
     BackArrow,
     Bank,

diff --git a/src/components/ImageView/index.tsx b/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>
     );
 }

diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -1970,6 +1970,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}).`,

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -1990,6 +1990,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}).`,