Merge pull request #429 from brian-tagg/tma844-bugfix-plus-sign

[TMA-844] Plus sign for profile and header in profile

1 files changed, 18 insertions, 5 deletions

diff --git a/src/components/common/Avatar.tsx b/src/components/common/Avatar.tsx
index 831cf906..86ebedf3 100644
--- a/src/components/common/Avatar.tsx
+++ b/src/components/common/Avatar.tsx
@@ -1,17 +1,30 @@
 import React, {FC} from 'react';
-import {Image, ImageStyle, StyleProp} from 'react-native';
+import {Image, ImageStyle, StyleProp, ImageBackground} from 'react-native';
 
 type AvatarProps = {
   style: StyleProp<ImageStyle>;
   uri: string | undefined;
+  loading: boolean;
+  loadingStyle: StyleProp<ImageStyle> | undefined;
 };
-const Avatar: FC<AvatarProps> = ({style, uri}) => {
+const Avatar: FC<AvatarProps> = ({
+  style,
+  uri,
+  loading = false,
+  loadingStyle,
+}) => {
   return (
-    <Image
+    <ImageBackground
       style={style}
       defaultSource={require('../../assets/images/avatar-placeholder.png')}
-      source={{uri, cache: 'reload'}}
-    />
+      source={{uri, cache: 'reload'}}>
+      {loading && (
+        <Image
+          source={require('../../assets/gifs/loading-animation.gif')}
+          style={loadingStyle}
+        />
+      )}
+    </ImageBackground>
   );
 };