From af9e1fc1d9ff39d0e0d09f0c5c650406c9ba88bb Mon Sep 17 00:00:00 2001
From: Krishna Gupta <belivethatkg@gmail.com>
Date: Mon, 31 Jul 2023 16:11:27 +0530
Subject: [PATCH 1/3] fix: image loader.

---
 src/components/ImageWithSizeCalculation.js | 24 +++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/ImageWithSizeCalculation.js b/src/components/ImageWithSizeCalculation.js
index 1e7838d1c8ce..a2d2dae1569b 100644
--- 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>
     );
 }

From 3b297a4e33edf5ec30c4c7f8de2191ec5381487d Mon Sep 17 00:00:00 2001
From: Krishna Gupta <belivethatkg@gmail.com>
Date: Tue, 1 Aug 2023 16:59:33 +0530
Subject: [PATCH 2/3] fix: timeout & if/else.

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
---
 src/components/ImageWithSizeCalculation.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/ImageWithSizeCalculation.js b/src/components/ImageWithSizeCalculation.js
index a2d2dae1569b..6c1e7480362d 100644
--- a/src/components/ImageWithSizeCalculation.js
+++ b/src/components/ImageWithSizeCalculation.js
@@ -39,9 +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});
@@ -57,14 +57,15 @@ 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);
+        if (isLoadedRef.current || !isLoading) {
+            return;
         }
-
+        const timeout = _.delay(() => {
+            if (!isLoading || isLoadedRef.current) {
+                return;
+            }
+            setIsImageCached(false);
+        }, 300);
         return () => clearTimeout(timeout);
     }, [isLoading]);
 

From e90f8abebab078bc6a8fd893754d8fef24ecb940 Mon Sep 17 00:00:00 2001
From: Krishna Gupta <belivethatkg@gmail.com>
Date: Thu, 3 Aug 2023 02:09:53 +0530
Subject: [PATCH 3/3] minor fix.

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
---
 src/components/ImageWithSizeCalculation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ImageWithSizeCalculation.js b/src/components/ImageWithSizeCalculation.js
index 6c1e7480362d..6aa87d07f23e 100644
--- a/src/components/ImageWithSizeCalculation.js
+++ b/src/components/ImageWithSizeCalculation.js
@@ -65,7 +65,7 @@ function ImageWithSizeCalculation(props) {
                 return;
             }
             setIsImageCached(false);
-        }, 300);
+        }, 200);
         return () => clearTimeout(timeout);
     }, [isLoading]);