handle unlimited requested api call and add fallbackIcon props

src/components/ImageWithSizeCalculation.js

@@ -1,12 +1,20 @@
 import _ from 'underscore';
-import React, {useState, useRef, useEffect} from 'react';
+import React, {useState, useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import Log from '../libs/Log';
 import styles from '../styles/styles';
 import FullscreenLoadingIndicator from './FullscreenLoadingIndicator';
 import Image from './Image';
 
+// Define constants for load states
+const LoadState = {
+    INITIAL: 'initial',
+    LOADING: 'loading',
+    LOADED: 'loaded',
+    ERRORED: 'errored',
+};
+
 const propTypes = {
     /** Url for image to display */
     url: PropTypes.string.isRequired,
@@ -39,16 +47,17 @@
  *
  */
 function ImageWithSizeCalculation(props) {
-    const isLoadedRef = useRef(null);
+    const [loadState, setLoadState] = useState(LoadState.INITIAL);
     const [isImageCached, setIsImageCached] = useState(true);
-    const [isLoading, setIsLoading] = useState(false);
+    const source = useMemo(() => ({ uri: props.url }), [props.url]);
 
     const onError = () => {
         Log.hmmm('Unable to fetch image to calculate size', {url: props.url});
+        setLoadState(LoadState.ERRORED);
     };
 
     const imageLoadedSuccessfully = (event) => {
-        isLoadedRef.current = true;
+        setLoadState(LoadState.LOADED);
         props.onMeasure({
             width: event.nativeEvent.width,
             height: event.nativeEvent.height,
@@ -57,39 +66,41 @@
 
     /** Delay the loader to detect whether the image is being loaded from the cache or the internet. */
     useEffect(() => {
-        if (isLoadedRef.current || !isLoading) {
+        if (loadState !== LoadState.LOADING) {
             return;
         }
         const timeout = _.delay(() => {
-            if (!isLoading || isLoadedRef.current) {
+            if (loadState !== LoadState.LOADING) {
                 return;
             }
+            setLoadState(LoadState.ERRORED);
             setIsImageCached(false);
         }, 200);
         return () => clearTimeout(timeout);
-    }, [isLoading]);
+    }, [loadState]);
 
     return (
         <View style={[styles.w100, styles.h100, props.style]}>
             <Image
                 style={[styles.w100, styles.h100]}
-                source={{uri: props.url}}
+                source={source}
                 isAuthTokenRequired={props.isAuthTokenRequired}
                 resizeMode={Image.resizeMode.cover}
                 onLoadStart={() => {
-                    if (isLoadedRef.current || isLoading) {
-                        return;
+                    if (loadState === LoadState.LOADED || isOffline) {
+                        setLoadState(LoadState.INITIAL);
+                    } else {
+                        setLoadState(LoadState.LOADING);
                     }
-                    setIsLoading(true);
                 }}
                 onLoadEnd={() => {
-                    setIsLoading(false);
+                    setLoadState(LoadState.LOADED);
                     setIsImageCached(true);
                 }}
                 onError={onError}
                 onLoad={imageLoadedSuccessfully}
             />
-            {isLoading && !isImageCached && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
+            {loadState === LoadState.LOADING && !isImageCached && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
         </View>
     );
 }

src/components/ThumbnailImage.js

@@ -7,6 +7,8 @@
 import * as StyleUtils from '../styles/StyleUtils';
 import * as DeviceCapabilities from '../libs/DeviceCapabilities';
 import useWindowDimensions from '../hooks/useWindowDimensions';
+import useNetwork from '../hooks/useNetwork';
+import ReceiptPlaceholderImage from '../../assets/images/receipt-placeholder.svg';
 
 const propTypes = {
     /** Source URL for the preview image */
@@ -91,15 +93,24 @@
     );
 
     const sizeStyles = props.shouldDynamicallyResize ? [StyleUtils.getWidthAndHeightStyle(imageWidth, imageHeight)] : [styles.w100, styles.h100];
+    const {isOffline} = useNetwork();
 
     return (
         <View style={[props.style, styles.overflowHidden]}>
             <View style={[...sizeStyles, styles.alignItemsCenter, styles.justifyContentCenter]}>
-                <ImageWithSizeCalculation
-                    url={props.previewSourceURL}
-                    onMeasure={updateImageSize}
-                    isAuthTokenRequired={props.isAuthTokenRequired}
-                />
+                {isOffline ? (
+                    <ReceiptPlaceholderImage
+                        pointerEvents={'none'}
+                        width={100}
+                        style={styles.receiptPlaceholder}
+                    />
+                ) : (
+                    <ImageWithSizeCalculation
+                        url={props.previewSourceURL}
+                        onMeasure={updateImageSize}
+                        isAuthTokenRequired={props.isAuthTokenRequired}
+                    />
+                )} 
             </View>
         </View>
     );

src/styles/styles.js

@@ -3899,6 +3899,12 @@ const styles = (theme) => ({
     checkboxWithLabelCheckboxStyle: {
         marginLeft: -2,
     },
+
+    receiptPlaceholder: {
+        position: 'absolute',
+        alignItems:'center',
+        justifyContent:'center'
+    },
 });
 
 // For now we need to export the styles function that takes the theme as an argument