Merge pull request #23781 from Krishna2323/krishna2323/issue/23268

Web - Loader appears for a second while switch between chats

Author: flodnv

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';
@@ -38,8 +39,9 @@ const defaultProps = {
  *
  */
 function ImageWithSizeCalculation(props) {
-    const [isLoading, setIsLoading] = useState(false);
     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});
@@ -53,6 +55,20 @@ function ImageWithSizeCalculation(props) {
         });
     };
 
+    /** 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
@@ -66,11 +82,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>
     );
 }