From 6ec539d41e56598c75114333445cf4b8a45f4bc7 Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Sun, 13 Feb 2022 23:46:04 +0530
Subject: [PATCH 1/3] feat: add image loading placeholder

---
 src/components/ImageWithSizeCalculation.js | 40 ++++++++++++++++------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/ImageWithSizeCalculation.js b/src/components/ImageWithSizeCalculation.js
index 698da27c610e..8831db37f369 100644
--- a/src/components/ImageWithSizeCalculation.js
+++ b/src/components/ImageWithSizeCalculation.js
@@ -1,9 +1,10 @@
 import React, {PureComponent} from 'react';
-import {Image} from 'react-native';
+import {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 +30,14 @@ const defaultProps = {
  * it can be appropriately resized.
  */
 class ImageWithSizeCalculation extends PureComponent {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            loading: true,
+        }
+    }
+
     componentDidMount() {
         this.calculateImageSize();
     }
@@ -85,15 +94,26 @@ class ImageWithSizeCalculation extends PureComponent {
 
     render() {
         return (
-            <Image
-                style={[
-                    styles.w100,
-                    styles.h100,
-                    this.props.style,
-                ]}
-                source={{uri: this.props.url}}
-                resizeMode="contain"
-            />
+            <>
+                <Image
+                    style={[
+                        styles.w100,
+                        styles.h100,
+                        this.state.loading && styles.dNone,
+                        this.props.style,
+                    ]}
+                    source={{uri: this.props.url}}
+                    resizeMode="contain"
+                    onLoadEnd={() => this.setState({loading: false})}
+                />
+                {this.state.loading && (
+                    <ActivityIndicator
+                        size="large"
+                        style={[styles.flex1]}
+                        color={themeColors.textSupporting}
+                    />
+                )}
+            </>
         );
     }
 }

From 4791a24ef23fd5c13eaf52e822e0e92c691ac885 Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Mon, 14 Feb 2022 09:06:58 +0530
Subject: [PATCH 2/3] style: add semi-colon

---
 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 8831db37f369..153b5b6e2871 100644
--- a/src/components/ImageWithSizeCalculation.js
+++ b/src/components/ImageWithSizeCalculation.js
@@ -35,7 +35,7 @@ class ImageWithSizeCalculation extends PureComponent {
 
         this.state = {
             loading: true,
-        }
+        };
     }
 
     componentDidMount() {

From 73c5eaa41ba0ca2329797cdd429c9bd74ae48584 Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Tue, 22 Feb 2022 18:29:21 +0530
Subject: [PATCH 3/3] refactor: rename variable names

---
 src/components/ImageWithSizeCalculation.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ImageWithSizeCalculation.js b/src/components/ImageWithSizeCalculation.js
index 153b5b6e2871..003fb3247ef5 100644
--- a/src/components/ImageWithSizeCalculation.js
+++ b/src/components/ImageWithSizeCalculation.js
@@ -34,7 +34,7 @@ class ImageWithSizeCalculation extends PureComponent {
         super(props);
 
         this.state = {
-            loading: true,
+            isLoading: true,
         };
     }
 
@@ -99,14 +99,14 @@ class ImageWithSizeCalculation extends PureComponent {
                     style={[
                         styles.w100,
                         styles.h100,
-                        this.state.loading && styles.dNone,
+                        this.state.isLoading && styles.dNone,
                         this.props.style,
                     ]}
                     source={{uri: this.props.url}}
                     resizeMode="contain"
-                    onLoadEnd={() => this.setState({loading: false})}
+                    onLoadEnd={() => this.setState({isLoading: false})}
                 />
-                {this.state.loading && (
+                {this.state.isLoading && (
                     <ActivityIndicator
                         size="large"
                         style={[styles.flex1]}