diff --git a/src/components/ImageWithSizeCalculation.js b/src/components/ImageWithSizeCalculation.js index 1e7838d1c8ce..6aa87d07f23e 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'; @@ -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 ( setIsLoading(false)} + onLoadEnd={() => { + setIsLoading(false); + setIsImageCached(true); + }} onError={onError} onLoad={imageLoadedSuccessfully} /> - {isLoading && } + {isLoading && !isImageCached && } ); }