Merge pull request Expensify#50918 from huult/49992-gray-placeholder-…

…displayed-markdown-image-wrong-url fix gray placeholder shown for markdown images with invalid URLs
software-mansion-labs · Oct 21, 2024 · e8d5313 · e8d5313
2 parents 7178033 + 1b0ebc6
commit e8d5313
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 5 deletions.
diff --git a/assets/images/gallery-not-found.svg b/assets/images/gallery-not-found.svg
diff --git a/src/components/AttachmentOfflineIndicator.tsx b/src/components/AttachmentOfflineIndicator.tsx
@@ -37,7 +37,7 @@ function AttachmentOfflineIndicator({isPreview = false}: AttachmentOfflineIndica
     return (
         <View style={[styles.flexColumn, styles.alignItemsCenter, styles.justifyContentCenter, styles.pAbsolute, styles.h100, styles.w100, isPreview && styles.hoveredComponentBG]}>
             <Icon
-                fill={theme.border}
+                fill={theme.icon}
                 src={Expensicons.OfflineCloud}
                 width={variables.iconSizeSuperLarge}
                 height={variables.iconSizeSuperLarge}

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
@@ -1,4 +1,4 @@
-import React, {memo} from 'react';
+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';
@@ -8,6 +8,7 @@ import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus';
 import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext';
 import ThumbnailImage from '@components/ThumbnailImage';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -63,7 +64,10 @@ function ImageRenderer({tnode}: ImageRendererProps) {
     const imagePreviewModalDisabled = htmlAttribs['data-expensify-preview-modal-disabled'] === 'true';
 
     const fileType = FileUtils.getFileType(attachmentSourceAttribute);
-    const fallbackIcon = fileType === CONST.ATTACHMENT_FILE_TYPE.FILE ? Expensicons.Document : Expensicons.Gallery;
+    const fallbackIcon = fileType === CONST.ATTACHMENT_FILE_TYPE.FILE ? Expensicons.Document : Expensicons.GalleryNotFound;
+    const [hasLoadFailed, setHasLoadFailed] = useState(true);
+    const theme = useTheme();
+
     const thumbnailImageComponent = (
         <ThumbnailImage
             previewSourceURL={previewSource}
@@ -73,6 +77,10 @@ function ImageRenderer({tnode}: ImageRendererProps) {
             imageWidth={imageWidth}
             imageHeight={imageHeight}
             altText={alt}
+            onLoadFailure={() => setHasLoadFailed(true)}
+            onMeasure={() => setHasLoadFailed(false)}
+            fallbackIconBackground={theme.highlightBG}
+            fallbackIconColor={theme.border}
         />
     );
 
@@ -102,6 +110,7 @@ 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
@@ -93,6 +93,7 @@ import FlagLevelTwo from '@assets/images/flag_level_02.svg';
 import FlagLevelThree from '@assets/images/flag_level_03.svg';
 import Folder from '@assets/images/folder.svg';
 import Fullscreen from '@assets/images/fullscreen.svg';
+import GalleryNotFound from '@assets/images/gallery-not-found.svg';
 import Gallery from '@assets/images/gallery.svg';
 import Gear from '@assets/images/gear.svg';
 import Globe from '@assets/images/globe.svg';
@@ -404,4 +405,5 @@ export {
     Bookmark,
     Star,
     QBDSquare,
+    GalleryNotFound,
 };
diff --git a/src/components/ThumbnailImage.tsx b/src/components/ThumbnailImage.tsx
@@ -55,6 +55,12 @@ type ThumbnailImageProps = {
 
     /** The object position of image */
     objectPosition?: ImageObjectPosition;
+
+    /** Callback fired when the image fails to load */
+    onLoadFailure?: () => void;
+
+    /** Callback fired when the image has been measured */
+    onMeasure?: () => void;
 };
 
 type UpdateImageSizeParams = {
@@ -75,6 +81,8 @@ function ThumbnailImage({
     fallbackIconColor,
     fallbackIconBackground,
     objectPosition = CONST.IMAGE_OBJECT_POSITION.INITIAL,
+    onLoadFailure,
+    onMeasure,
 }: ThumbnailImageProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -137,8 +145,14 @@ function ThumbnailImage({
                 <ImageWithSizeCalculation
                     url={previewSourceURL}
                     altText={altText}
-                    onMeasure={updateImageSize}
-                    onLoadFailure={() => setFailedToLoad(true)}
+                    onMeasure={(args) => {
+                        updateImageSize(args);
+                        onMeasure?.();
+                    }}
+                    onLoadFailure={() => {
+                        setFailedToLoad(true);
+                        onLoadFailure?.();
+                    }}
                     isAuthTokenRequired={isAuthTokenRequired}
                     objectPosition={objectPosition}
                 />