feat: add image loading indicator styles

Expensify · Mar 30, 2022 · 773b93f · 773b93f
1 parent cc3c5b5
commit 773b93f
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -317,6 +317,10 @@ const styles = {
         backgroundColor: 'transparent',
     },
 
+    opacity1: {
+        opacity: 1,
+    },
+
     textDanger: {
         color: colors.red,
     },