diff options
| author | Ivan Chen <ivan@tagg.id> | 2021-05-20 16:40:31 -0400 |
|---|---|---|
| committer | Ivan Chen <ivan@tagg.id> | 2021-05-20 16:40:31 -0400 |
| commit | e797361b81778a08de2bc81038196ba62126fc59 (patch) | |
| tree | ddae3b099e281c3d4e3b7b2841886e07f41b700a | |
| parent | 3fd9c10aadb874a0fd0c0c206c8a4a9d83e939a0 (diff) | |
Revert change to avatar, using another design
| -rw-r--r-- | src/components/common/Avatar.tsx | 29 | ||||
| -rw-r--r-- | src/components/profile/TaggAvatar.tsx | 4 |
2 files changed, 19 insertions, 14 deletions
diff --git a/src/components/common/Avatar.tsx b/src/components/common/Avatar.tsx index 46a3814c..fa80f121 100644 --- a/src/components/common/Avatar.tsx +++ b/src/components/common/Avatar.tsx @@ -4,28 +4,33 @@ import {Image, ImageStyle, StyleProp, ImageBackground} from 'react-native'; type AvatarProps = { style: StyleProp<ImageStyle>; uri: string | undefined; - // loading: boolean; - // loadingStyle: StyleProp<ImageStyle> | undefined; + loading?: boolean; + loadingStyle?: StyleProp<ImageStyle> | undefined; }; const Avatar: FC<AvatarProps> = ({ style, uri, - // loading = false, - // loadingStyle, + loading = false, + loadingStyle, }) => { - return ( - // <ImageBackground - // style={style} - // defaultSource={require('../../assets/images/avatar-placeholder.png')} - // source={{uri, cache: 'reload'}}> - // {loading && ( + return loading ? ( + <ImageBackground + style={style} + defaultSource={require('../../assets/images/avatar-placeholder.png')} + source={{uri, cache: 'reload'}}> + {loading && ( + <Image + source={require('../../assets/gifs/loading-animation.gif')} + style={loadingStyle} + /> + )} + </ImageBackground> + ) : ( <Image defaultSource={require('../../assets/images/avatar-placeholder.png')} source={{uri, cache: 'reload'}} style={style} /> - // )} - // </ImageBackground> ); }; diff --git a/src/components/profile/TaggAvatar.tsx b/src/components/profile/TaggAvatar.tsx index 7b0f0d6f..8cd52a2f 100644 --- a/src/components/profile/TaggAvatar.tsx +++ b/src/components/profile/TaggAvatar.tsx @@ -79,8 +79,8 @@ const TaggAvatar: React.FC<TaggAvatarProps> = ({ <Avatar style={[styles.image, style]} uri={avatar} - // loading={loading} - // loadingStyle={styles.loadingLarge} + loading={loading} + loadingStyle={styles.loadingLarge} /> {editable && !validImage && |