fix(Expensify#26046): cache detecting logic moved to Image component.

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

src/components/Image/index.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useMemo} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {Image as RNImage} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
@@ -8,7 +8,10 @@ import {defaultProps, imagePropTypes} from './imagePropTypes';
 import RESIZE_MODES from './resizeModes';
 
 function Image(props) {
-    const {source: propsSource, isAuthTokenRequired, onLoad, session} = props;
+    const {source: propsSource, isAuthTokenRequired, onLoad, session, onLoadStart = () => {}, onLoadEnd = () => {}} = props;
+
+    const [isLoading, setIsLoading] = useState(false);
+    const isLoadedRef = useRef(null);
     /**
      * Check if the image source is a URL - if so the `encryptedAuthToken` is appended
      * to the source.
@@ -41,14 +44,34 @@ function Image(props) {
         });
     }, [onLoad, source]);
 
+    /** Delay the loader to detect whether the image is being loaded from the cache or the internet. */
+    useEffect(() => {
+        if (isLoadedRef.current || !isLoading) {
+            return;
+        }
+        const timeout = _.delay(() => {
+            if (!isLoading || isLoadedRef.current) {
+                return;
+            }
+            onLoadStart();
+        }, 200);
+        return () => clearTimeout(timeout);
+    }, [isLoading, onLoadStart]);
+
     // Omit the props which the underlying RNImage won't use
-    const forwardedProps = _.omit(props, ['source', 'onLoad', 'session', 'isAuthTokenRequired']);
+    const forwardedProps = _.omit(props, ['source', 'onLoad', 'session', 'isAuthTokenRequired', 'onLoadStart', 'onLoadEnd']);
 
     return (
         <RNImage
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...forwardedProps}
             source={source}
+            onLoadStart={() => setIsLoading(true)}
+            onLoadEnd={() => {
+                onLoadEnd();
+                setIsLoading(false);
+                isLoadedRef.current = true;
+            }}
         />
     );
 }

src/components/ImageWithSizeCalculation.js

@@ -1,5 +1,4 @@
-import _ from 'underscore';
-import React, {useState, useRef, useEffect} from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import Log from '../libs/Log';
@@ -39,36 +38,19 @@ const defaultProps = {
  *
  */
 function ImageWithSizeCalculation(props) {
-    const isLoadedRef = useRef(null);
-    const [isImageCached, setIsImageCached] = useState(true);
     const [isLoading, setIsLoading] = useState(false);
 
     const onError = () => {
         Log.hmmm('Unable to fetch image to calculate size', {url: props.url});
     };
 
     const imageLoadedSuccessfully = (event) => {
-        isLoadedRef.current = true;
         props.onMeasure({
             width: event.nativeEvent.width,
             height: event.nativeEvent.height,
         });
     };
 
-    /** Delay the loader to detect whether the image is being loaded from the cache or the internet. */
-    useEffect(() => {
-        if (isLoadedRef.current || !isLoading) {
-            return;
-        }
-        const timeout = _.delay(() => {
-            if (!isLoading || isLoadedRef.current) {
-                return;
-            }
-            setIsImageCached(false);
-        }, 200);
-        return () => clearTimeout(timeout);
-    }, [isLoading]);
-
     return (
         <View style={[styles.w100, styles.h100, props.style]}>
             <Image
@@ -77,19 +59,15 @@ function ImageWithSizeCalculation(props) {
                 isAuthTokenRequired={props.isAuthTokenRequired}
                 resizeMode={Image.resizeMode.cover}
                 onLoadStart={() => {
-                    if (isLoadedRef.current || isLoading) {
-                        return;
-                    }
                     setIsLoading(true);
                 }}
                 onLoadEnd={() => {
                     setIsLoading(false);
-                    setIsImageCached(true);
                 }}
                 onError={onError}
                 onLoad={imageLoadedSuccessfully}
             />
-            {isLoading && !isImageCached && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
+            {isLoading && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
         </View>
     );
 }