From 9fc4fd103d4631ff8c3d70ea68ab6ee8a20f51a1 Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Tue, 15 Mar 2022 19:22:23 +0530
Subject: [PATCH] feat: add image loading indicator

---
 src/components/ImageWithSizeCalculation.js | 38 +++++++++++++++++++---
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/components/ImageWithSizeCalculation.js b/src/components/ImageWithSizeCalculation.js
index 698da27c610e..52263a4bd901 100644
--- a/src/components/ImageWithSizeCalculation.js
+++ b/src/components/ImageWithSizeCalculation.js
@@ -1,9 +1,12 @@
 import React, {PureComponent} from 'react';
-import {Image} from 'react-native';
+import {
+    StyleSheet, View, Image, ActivityIndicator,
+} from 'react-native';
 import PropTypes from 'prop-types';
 import Log from '../libs/Log';
 import styles from '../styles/styles';
 import makeCancellablePromise from '../libs/MakeCancellablePromise';
+import themeColors from '../styles/themes/default';
 
 const propTypes = {
     /** Url for image to display */
@@ -29,6 +32,14 @@ const defaultProps = {
  * it can be appropriately resized.
  */
 class ImageWithSizeCalculation extends PureComponent {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isLoading: true,
+        };
+    }
+
     componentDidMount() {
         this.calculateImageSize();
     }
@@ -85,15 +96,32 @@ class ImageWithSizeCalculation extends PureComponent {
 
     render() {
         return (
-            <Image
+            <View
                 style={[
                     styles.w100,
                     styles.h100,
                     this.props.style,
                 ]}
-                source={{uri: this.props.url}}
-                resizeMode="contain"
-            />
+            >
+                <Image
+                    style={[
+                        styles.w100,
+                        styles.h100,
+                    ]}
+                    source={{uri: this.props.url}}
+                    resizeMode="contain"
+                    onLoadEnd={() => this.setState({isLoading: false})}
+                />
+                {this.state.isLoading && (
+                    <View style={{...StyleSheet.absoluteFillObject}}>
+                        <ActivityIndicator
+                            size="large"
+                            color={themeColors.spinner}
+                            style={[styles.flex1]}
+                        />
+                    </View>
+                )}
+            </View>
         );
     }
 }