Merge pull request #88575 from callstack-internal/feat/show-thumbnail

Show thumbnail preview while receipt image loads

Author: marcaaron

src/components/ImageWithLoading.tsx

@@ -24,6 +24,9 @@ type ImageWithSizeLoadingProps = {
 
     /** Invoked on mount and layout changes */
     onLayout?: (event: LayoutChangeEvent) => void;
+
+    /** Low-resolution URI shown as a placeholder while the full image loads */
+    previewUri?: string;
 } & ImageProps;
 
 function ImageWithLoading({
@@ -37,12 +40,14 @@ function ImageWithLoading({
     onLoad,
     onLayout,
     style,
+    previewUri,
     ...rest
 }: ImageWithSizeLoadingProps) {
     const styles = useThemeStyles();
     const isLoadedRef = useRef<boolean | null>(null);
     const [isImageCached, setIsImageCached] = useState(true);
     const [isLoading, setIsLoading] = useState(false);
+    const [isThumbnailLoading, setIsThumbnailLoading] = useState(!!previewUri);
     const {isOffline} = useNetwork();
 
     const handleError = () => {
@@ -83,6 +88,21 @@ function ImageWithLoading({
             style={[styles.w100, styles.h100, containerStyles]}
             onLayout={onLayout}
         >
+            {isLoading && !!previewUri && (
+                // eslint-disable-next-line react-native-a11y/has-valid-accessibility-ignores-invert-colors -- Custom Image wrapper does not support this prop.
+                <Image
+                    {...rest}
+                    source={{uri: previewUri}}
+                    style={[styles.w100, styles.h100, style]}
+                    resizeMode={resizeMode}
+                    onLoad={(e) => {
+                        setIsThumbnailLoading(false);
+                        onLoad?.(e);
+                    }}
+                    loadingIconSize={loadingIconSize}
+                    loadingIndicatorStyles={loadingIndicatorStyles}
+                />
+            )}
             {/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-ignores-invert-colors -- Custom Image wrapper does not support this prop. */}
             <Image
                 {...rest}
@@ -104,12 +124,13 @@ function ImageWithLoading({
                     isLoadedRef.current = false;
                     setIsImageCached(false);
                     setIsLoading(true);
+                    setIsThumbnailLoading(!!previewUri);
                     waitForSession?.();
                 }}
                 loadingIconSize={loadingIconSize}
                 loadingIndicatorStyles={loadingIndicatorStyles}
             />
-            {isLoading && !isImageCached && !isOffline && (
+            {isLoading && (!previewUri || isThumbnailLoading) && !isImageCached && !isOffline && (
                 <LoadingIndicator
                     iconSize={loadingIconSize}
                     style={[styles.opacity1, styles.bgTransparent, loadingIndicatorStyles]}

src/components/ImageWithSizeCalculation.tsx

@@ -53,6 +53,9 @@ type ImageWithSizeCalculationProps = {
 
     /** Reason attributes for skeleton span telemetry */
     reasonAttributes?: SkeletonSpanReasonAttributes;
+
+    /** Low-resolution URI shown as a placeholder while the full image loads */
+    previewUri?: string;
 };
 
 /**
@@ -74,6 +77,7 @@ function ImageWithSizeCalculation({
     onLoad,
     resizeMode,
     reasonAttributes,
+    previewUri,
 }: ImageWithSizeCalculationProps) {
     const styles = useThemeStyles();
 
@@ -104,6 +108,7 @@ function ImageWithSizeCalculation({
             loadingIconSize={loadingIconSize}
             loadingIndicatorStyles={loadingIndicatorStyles}
             reasonAttributes={reasonAttributes}
+            previewUri={previewUri}
         />
     );
 }

src/components/ReceiptImage/index.tsx

@@ -131,6 +131,9 @@ type ReceiptImageProps = (
 
     /** Any additional styles to apply */
     style?: StyleProp<ViewStyle & ImageStyle>;
+
+    /** Low-resolution URI shown as a placeholder while the full image loads */
+    previewUri?: string;
 };
 
 function ReceiptImage({
@@ -161,6 +164,7 @@ function ReceiptImage({
     onLoadFailure,
     resizeMode,
     style,
+    previewUri,
 }: ReceiptImageProps) {
     const styles = useThemeStyles();
     const [receiptImageWidth, setReceiptImageWidth] = useState<number | undefined>(undefined);
@@ -216,6 +220,7 @@ function ReceiptImage({
         return (
             <ThumbnailImage
                 previewSourceURL={source ?? ''}
+                previewUri={previewUri}
                 style={[styles.w100, styles.h100, style, thumbnailContainerStyles]}
                 isAuthTokenRequired={isAuthTokenRequired ?? false}
                 shouldDynamicallyResize={false}
@@ -255,6 +260,7 @@ function ReceiptImage({
             onError={onLoadFailure}
             resizeMode={resizeMode}
             reasonAttributes={reasonAttributes}
+            previewUri={previewUri}
         />
     );
 }

src/components/ReportActionItem/ReportActionItemImage.tsx

@@ -14,6 +14,7 @@ import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getReportIDForExpense} from '@libs/MergeTransactionUtils';
 import Navigation from '@libs/Navigation/Navigation';
+import {getThumbnailAndImageURIs} from '@libs/ReceiptUtils';
 import {hasEReceipt, hasReceiptSource, isDistanceRequest, isFetchingWaypointsFromServer, isManualDistanceRequest, isPerDiemRequest} from '@libs/TransactionUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import variables from '@styles/variables';
@@ -142,10 +143,13 @@ function ReportActionItemImage({
     const localSource = transaction?.receipt?.localSource;
     const effectiveIsLocalFile = isLocalFile || !!localSource;
     const effectiveThumbnail = localSource ?? thumbnail;
+    const receiptURIs = transaction ? getThumbnailAndImageURIs(transaction, null, null) : undefined;
+    const effectivePreviewUri = localSource ? undefined : receiptURIs?.thumbnail320;
     const effectiveImage = localSource != null && typeof image === 'string' ? localSource : image;
 
     const originalImageSource = tryResolveUrlFromApiRoot(effectiveImage ?? '');
     const thumbnailSource = tryResolveUrlFromApiRoot(effectiveThumbnail ?? '');
+    const previewUriSource = effectivePreviewUri ? tryResolveUrlFromApiRoot(effectivePreviewUri) : undefined;
     const isEReceipt = transaction && !hasReceiptSource(transaction) && hasEReceipt(transaction);
     const isPDF = filename && Str.isPDF(filename);
 
@@ -207,6 +211,7 @@ function ReportActionItemImage({
                     onLoad={onLoad}
                     shouldUseFullHeight={shouldUseFullHeight}
                     onLoadFailure={onLoadFailure}
+                    previewUri={previewUriSource}
                 />
             </PressableWithoutFocus>
         );
@@ -219,6 +224,7 @@ function ReportActionItemImage({
             thumbnailContainerStyles={styles.thumbnailImageContainerHover}
             onLoad={onLoad}
             onLoadFailure={onLoadFailure}
+            previewUri={previewUriSource}
         />
     );
 }

src/components/ThumbnailImage.tsx

@@ -83,6 +83,9 @@ type ThumbnailImageProps = {
 
     /** Reason attributes for skeleton span telemetry */
     reasonAttributes?: SkeletonSpanReasonAttributes;
+
+    /** Low-resolution URI shown as a placeholder while the full image loads */
+    previewUri?: string;
 };
 
 function ThumbnailImage({
@@ -106,6 +109,7 @@ function ThumbnailImage({
     onLoad,
     resizeMode,
     reasonAttributes,
+    previewUri,
 }: ThumbnailImageProps) {
     const icons = useMemoizedLazyExpensifyIcons(['Gallery', 'OfflineCloud']);
     const styles = useThemeStyles();
@@ -172,6 +176,7 @@ function ThumbnailImage({
                     onLoad={onLoad}
                     resizeMode={resizeMode}
                     reasonAttributes={reasonAttributes}
+                    previewUri={previewUri}
                 />
             </View>
         </View>