From 773b93f296da193d030a4859b425bb9f74d366f7 Mon Sep 17 00:00:00 2001
From: Md Neyaz Ahmad <mdneyazahmad66@gmail.com>
Date: Wed, 30 Mar 2022 17:31:45 +0530
Subject: [PATCH] feat: add image loading indicator styles

---
 src/components/ImageView/index.js          | 12 ++++++++++--
 src/components/ImageView/index.native.js   | 10 ++++++++--
 src/components/ImageWithSizeCalculation.js |  6 +++++-
 src/styles/styles.js                       |  4 ++++
 4 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js
index 76997155b013..2017962b5e83 100644
--- a/src/components/ImageView/index.js
+++ b/src/components/ImageView/index.js
@@ -255,7 +255,11 @@ class ImageView extends PureComponent {
                         onLoadStart={this.imageLoadingStart}
                         onLoadEnd={this.imageLoadingEnd}
                     />
-                    {this.state.isLoading && <FullscreenLoadingIndicator />}
+                    {this.state.isLoading && (
+                        <FullscreenLoadingIndicator
+                            style={[styles.opacity1, styles.bgTransparent]}
+                        />
+                    )}
                 </View>
             );
         }
@@ -294,7 +298,11 @@ class ImageView extends PureComponent {
                     />
                 </Pressable>
 
-                {this.state.isLoading && <FullscreenLoadingIndicator />}
+                {this.state.isLoading && (
+                    <FullscreenLoadingIndicator
+                        style={[styles.opacity1, styles.bgTransparent]}
+                    />
+                )}
             </View>
         );
     }
diff --git a/src/components/ImageView/index.native.js b/src/components/ImageView/index.native.js
index c39e2a41ba15..360210ac50f9 100644
--- a/src/components/ImageView/index.native.js
+++ b/src/components/ImageView/index.native.js
@@ -137,7 +137,9 @@ class ImageView extends PureComponent {
                         style={StyleUtils.getWidthAndHeightStyle(this.state.thumbnailWidth, this.state.thumbnailHeight)}
                         resizeMode="contain"
                     />
-                    <FullscreenLoadingIndicator />
+                    <FullscreenLoadingIndicator
+                        style={[styles.opacity1, styles.bgTransparent]}
+                    />
                 </View>
             );
         }
@@ -212,7 +214,11 @@ class ImageView extends PureComponent {
                         ]}
                     />
                 </ImageZoom>
-                {this.state.isLoading && <FullscreenLoadingIndicator />}
+                {this.state.isLoading && (
+                    <FullscreenLoadingIndicator
+                        style={[styles.opacity1, styles.bgTransparent]}
+                    />
+                )}
             </View>
         );
     }
diff --git a/src/components/ImageWithSizeCalculation.js b/src/components/ImageWithSizeCalculation.js
index 98539c6fca5d..3b6eee240d11 100644
--- a/src/components/ImageWithSizeCalculation.js
+++ b/src/components/ImageWithSizeCalculation.js
@@ -122,7 +122,11 @@ class ImageWithSizeCalculation extends PureComponent {
                     onLoadStart={this.imageLoadingStart}
                     onLoadEnd={this.imageLoadingEnd}
                 />
-                {this.state.isLoading && <FullscreenLoadingIndicator />}
+                {this.state.isLoading && (
+                    <FullscreenLoadingIndicator
+                        style={[styles.opacity1, styles.bgTransparent]}
+                    />
+                )}
             </View>
         );
     }
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 9eab8076ae71..6ba66e585eae 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -317,6 +317,10 @@ const styles = {
         backgroundColor: 'transparent',
     },
 
+    opacity1: {
+        opacity: 1,
+    },
+
     textDanger: {
         color: colors.red,
     },