fix: image loader.

Expensify · Jul 31, 2023 · af9e1fc · af9e1fc
1 parent eb02006
commit af9e1fc
Showing 1 changed file with 21 additions and 3 deletions.
diff --git a/src/components/ImageWithSizeCalculation.js b/src/components/ImageWithSizeCalculation.js
@@ -1,4 +1,5 @@
-import React, {useState, useRef} from 'react';
+import _ from 'underscore';
+import React, {useState, useRef, useEffect} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import Log from '../libs/Log';
@@ -40,6 +41,7 @@ const defaultProps = {
 function ImageWithSizeCalculation(props) {
     const [isLoading, setIsLoading] = useState(false);
     const isLoadedRef = useRef(null);
+    const [isImageCached, setIsImageCached] = useState(true);
 
     const onError = () => {
         Log.hmmm('Unable to fetch image to calculate size', {url: props.url});
@@ -53,6 +55,19 @@ function ImageWithSizeCalculation(props) {
         });
     };
 
+    /** Delay the loader to detect whether the image is being loaded from the cache or the internet. */
+    useEffect(() => {
+        let timeout;
+
+        if (isLoading) {
+            timeout = _.delay(() => {
+                setIsImageCached(false);
+            }, 175);
+        }
+
+        return () => clearTimeout(timeout);
+    }, [isLoading]);
+
     return (
         <View style={[styles.w100, styles.h100, props.style]}>
             <Image
@@ -66,11 +81,14 @@ function ImageWithSizeCalculation(props) {
                     }
                     setIsLoading(true);
                 }}
-                onLoadEnd={() => setIsLoading(false)}
+                onLoadEnd={() => {
+                    setIsLoading(false);
+                    setIsImageCached(true);
+                }}
                 onError={onError}
                 onLoad={imageLoadedSuccessfully}
             />
-            {isLoading && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
+            {isLoading && !isImageCached && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
         </View>
     );
 }