fix 403 error, add loading state

borys3kk · borys3kk · commit e13adb6a9d49 · 2025-08-14T18:28:56.000+02:00
diff --git a/src/CONST/index.ts b/src/CONST/index.ts
@@ -1536,7 +1536,7 @@ const CONST = {
         DEBOUNCE_HANDLE_SEARCH: 'debounce_handle_search',
         FAST_SEARCH_TREE_CREATION: 'fast_search_tree_creation',
         SHOW_HOVER_PREVIEW_DELAY: 270,
-        SHOW_HOVER_PREVIEW_ANIMATION_DURATION: 200,
+        SHOW_HOVER_PREVIEW_ANIMATION_DURATION: 250,
     },
     PRIORITY_MODE: {
         GSD: 'gsd',
diff --git a/src/components/EReceiptWithSizeCalculation.tsx b/src/components/EReceiptWithSizeCalculation.tsx
@@ -13,6 +13,8 @@ type EReceiptWithSizeCalculationProps = {
     transactionItem?: TransactionListItemType | Transaction;
 };
 
+const eReceiptAspectRatio = variables.eReceiptBGHWidth / variables.eReceiptBGHeight;
+
 function EReceiptWithSizeCalculation(props: EReceiptWithSizeCalculationProps) {
     const [scaleFactor, setScaleFactor] = useState(0);
     const styles = useThemeStyles();
@@ -28,7 +30,11 @@ function EReceiptWithSizeCalculation(props: EReceiptWithSizeCalculationProps) {
                 onLayout={onLayout}
                 // We are applying transform of 0 translateZ to avoid a sub-pixel rendering error of a thin 1px line
                 // appearing on EReceipts on web, specifically in chrome. More details in https://github.com/Expensify/App/pull/59944#issuecomment-2797249923.
-                style={[styles.w100, styles.h100, {transform: `scale(${scaleFactor}) ${styles.translateZ0.transform as string}`, transformOrigin: 'top left'}]}
+                style={[
+                    styles.w100,
+                    styles.h100,
+                    {transform: `scale(${scaleFactor}) ${styles.translateZ0.transform as string}`, transformOrigin: 'top left', aspectRatio: eReceiptAspectRatio},
+                ]}
             >
                 <EReceipt
                     // eslint-disable-next-line react/jsx-props-no-spreading
diff --git a/src/components/TransactionItemRow/DataCells/ReceiptCell.tsx b/src/components/TransactionItemRow/DataCells/ReceiptCell.tsx
@@ -23,10 +23,13 @@ function ReceiptCell({transactionItem, isSelected, style}: {transactionItem: Tra
     const {hovered, bind} = useHover();
     const isEReceipt = transactionItem.hasEReceipt && !hasReceiptSource(transactionItem);
     let source = transactionItem?.receipt?.source ?? '';
+    let previewSource = transactionItem?.receipt?.source ?? '';
+
     if (source) {
         const filename = getFileName(source);
         const receiptURIs = getThumbnailAndImageURIs(transactionItem, null, filename);
         source = tryResolveUrlFromApiRoot(receiptURIs.thumbnail ?? receiptURIs.image ?? '');
+        previewSource = tryResolveUrlFromApiRoot(receiptURIs.image ?? receiptURIs.thumbnail ?? '');
     }
 
     return (
@@ -45,7 +48,7 @@ function ReceiptCell({transactionItem, isSelected, style}: {transactionItem: Tra
                 source={source}
                 isEReceipt={isEReceipt}
                 transactionID={transactionItem.transactionID}
-                shouldUseThumbnailImage={!transactionItem?.receipt?.source}
+                shouldUseThumbnailImage
                 isAuthTokenRequired
                 fallbackIcon={Receipt}
                 fallbackIconSize={20}
@@ -55,9 +58,10 @@ function ReceiptCell({transactionItem, isSelected, style}: {transactionItem: Tra
                 loadingIconSize="small"
                 loadingIndicatorStyles={styles.bgTransparent}
                 transactionItem={transactionItem}
+                shouldUseInitialObjectPosition
             />
             <ReceiptPreview
-                source={source}
+                source={previewSource}
                 hovered={hovered}
                 isEReceipt={!!isEReceipt}
                 transactionItem={transactionItem}
diff --git a/src/components/TransactionItemRow/ReceiptPreview/index.tsx b/src/components/TransactionItemRow/ReceiptPreview/index.tsx
@@ -1,23 +1,22 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import ReactDOM from 'react-dom';
 import type {LayoutChangeEvent} from 'react-native';
-import {View} from 'react-native';
-import Animated, {FadeIn, FadeOut} from 'react-native-reanimated';
+import {ActivityIndicator, StyleSheet, View} from 'react-native';
+import Animated, {FadeIn, FadeOut, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import DistanceEReceipt from '@components/DistanceEReceipt';
-import EReceipt from '@components/EReceipt';
-import BaseImage from '@components/Image/BaseImage';
+import EReceiptWithSizeCalculation from '@components/EReceiptWithSizeCalculation';
 import type {ImageOnLoadEvent} from '@components/Image/types';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import {isDistanceRequest} from '@libs/TransactionUtils';
 import variables from '@styles/variables';
+import Image from '@src/components/Image';
 import CONST from '@src/CONST';
 import type {Transaction} from '@src/types/onyx';
 
-const eReceiptAspectRatio = variables.eReceiptBGHWidth / variables.eReceiptBGHeight;
-
 type ReceiptPreviewProps = {
     /** Path to the image to be opened in the preview */
     source: string;
@@ -35,14 +34,20 @@ type ReceiptPreviewProps = {
 function ReceiptPreview({source, hovered, isEReceipt = false, transactionItem}: ReceiptPreviewProps) {
     const isDistanceEReceipt = isDistanceRequest(transactionItem);
     const styles = useThemeStyles();
+    const theme = useTheme();
     const [eReceiptScaleFactor, setEReceiptScaleFactor] = useState(0);
     const [imageAspectRatio, setImageAspectRatio] = useState<string | number | undefined>(undefined);
     const [distanceEReceiptAspectRatio, setDistanceEReceiptAspectRatio] = useState<string | number | undefined>(undefined);
     const [shouldShow, debounceShouldShow, setShouldShow] = useDebouncedState(false, CONST.TIMING.SHOW_HOVER_PREVIEW_DELAY);
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const hasMeasured = useRef(false);
     const {windowHeight} = useWindowDimensions();
+    const [isLoading, setIsLoading] = useState(true);
+    const containerHeight = useSharedValue(150);
 
+    const animatedContainerStyle = useAnimatedStyle(() => ({
+        height: containerHeight.get(),
+    }));
     const handleDistanceEReceiptLayout = (e: LayoutChangeEvent) => {
         if (hasMeasured.current) {
             return;
@@ -57,8 +62,10 @@ function ReceiptPreview({source, hovered, isEReceipt = false, transactionItem}:
         }
         if (height * eReceiptScaleFactor > windowHeight - CONST.RECEIPT_PREVIEW_TOP_BOTTOM_MARGIN) {
             setDistanceEReceiptAspectRatio(variables.eReceiptBGHWidth / (windowHeight - CONST.RECEIPT_PREVIEW_TOP_BOTTOM_MARGIN));
+            containerHeight.set(withTiming(windowHeight - CONST.RECEIPT_PREVIEW_TOP_BOTTOM_MARGIN, {duration: 300}));
             return;
         }
+        containerHeight.set(withTiming(height, {duration: 300}));
         setDistanceEReceiptAspectRatio(variables.eReceiptBGHWidth / height);
         setEReceiptScaleFactor(width / variables.eReceiptBGHWidth);
     };
@@ -75,17 +82,21 @@ function ReceiptPreview({source, hovered, isEReceipt = false, transactionItem}:
     );
 
     const handleLoad = useCallback(
-        (event: ImageOnLoadEvent) => {
-            const {width, height} = event.nativeEvent;
-
+        (e: ImageOnLoadEvent) => {
+            const {width, height} = e.nativeEvent;
             updateImageAspectRatio(width, height);
+            setIsLoading(false);
+
+            if (width && height) {
+                const scaledHeight = (height / width) * 380;
+                containerHeight.set(withTiming(scaledHeight, {duration: 300}));
+            }
         },
-        [updateImageAspectRatio],
+        [updateImageAspectRatio, containerHeight],
     );
 
-    const handleEReceiptLayout = (e: LayoutChangeEvent) => {
-        const {width} = e.nativeEvent.layout;
-        setEReceiptScaleFactor(width / variables.eReceiptBGHWidth);
+    const handleError = () => {
+        setIsLoading(false);
     };
 
     useEffect(() => {
@@ -103,22 +114,55 @@ function ReceiptPreview({source, hovered, isEReceipt = false, transactionItem}:
         <Animated.View
             entering={FadeIn.duration(CONST.TIMING.SHOW_HOVER_PREVIEW_ANIMATION_DURATION)}
             exiting={FadeOut.duration(CONST.TIMING.SHOW_HOVER_PREVIEW_ANIMATION_DURATION)}
-            style={[styles.receiptPreview, styles.flexColumn, styles.alignItemsCenter, styles.justifyContentStart]}
+            style={[
+                styles.receiptPreview,
+                styles.flexColumn,
+                styles.alignItemsCenter,
+                styles.justifyContentStart,
+                animatedContainerStyle, // smoothly animated height
+            ]}
         >
             {shouldShowImage ? (
                 <View style={[styles.w100]}>
-                    <BaseImage
+                    {isLoading && (
+                        <View style={[StyleSheet.absoluteFillObject, {top: 75}]}>
+                            <ActivityIndicator
+                                color={theme.spinner}
+                                size="large"
+                            />
+                        </View>
+                    )}
+
+                    <Image
                         source={{uri: source}}
-                        style={[styles.w100, {aspectRatio: imageAspectRatio}]}
+                        style={[
+                            styles.w100,
+                            {aspectRatio: imageAspectRatio ?? 1},
+                            isLoading && {opacity: 0}, // hide until loaded
+                        ]}
+                        onLoadStart={() => {
+                            if (isLoading) {
+                                return;
+                            }
+                            setIsLoading(true);
+                        }}
+                        onError={handleError}
                         onLoad={handleLoad}
+                        isAuthTokenRequired
                     />
                 </View>
             ) : (
                 <View style={styles.receiptPreviewEReceiptsContainer}>
                     {shouldShowDistanceEReceipt ? (
                         <View
                             onLayout={handleDistanceEReceiptLayout}
-                            style={[{transformOrigin: 'center', scale: eReceiptScaleFactor, aspectRatio: distanceEReceiptAspectRatio}]}
+                            style={[
+                                {
+                                    transformOrigin: 'center',
+                                    scale: eReceiptScaleFactor,
+                                    aspectRatio: distanceEReceiptAspectRatio,
+                                },
+                            ]}
                         >
                             <DistanceEReceipt
                                 transaction={transactionItem}
@@ -127,10 +171,11 @@ function ReceiptPreview({source, hovered, isEReceipt = false, transactionItem}:
                         </View>
                     ) : (
                         <View
-                            onLayout={handleEReceiptLayout}
-                            style={[styles.receiptPreviewEReceipt, {aspectRatio: eReceiptAspectRatio, scale: eReceiptScaleFactor}]}
+                            onLayout={() => {
+                                containerHeight.set(withTiming(variables.eReceiptBGHeight, {duration: 300}));
+                            }}
                         >
-                            <EReceipt
+                            <EReceiptWithSizeCalculation
                                 transactionID={transactionItem.transactionID}
                                 transactionItem={transactionItem}
                             />
