LFG-187: image placeholder shown while loading the image

Author: kusalshrestha

app/screens/contact/contactCell/contactCell.js

@@ -89,21 +89,27 @@ import placeHolderImage from './../../../../assets/images/default.png';
     )
   }
 
+  _imageLoadComplete = () => {
+    // console.log('=====00000')
+  }
+
   render() {
     return (
       <TouchableHighlight onPress={() => this._onCellSelection()} underlayColor={colors.LIGHT_GRAY} activeOpacity={0.4}>
         <View style={ style.mainContainer }>
           <View style={style.imageContainer}>
+            <EmptyProfileImage
+              firstName={this.props.data.firstName}
+              lastName={this.props.data.lastName}
+              textSize={16}
+              style={style.contactImage}
+            />
             {
-              this.props.data.avatarUrl ?
-              <Image style={[style.contactImage, {resizeMode: 'contain'}]} source={{uri: this.props.data.avatarUrl}}/>
-              // <ProgressiveImage source={{uri: this.props.avatarUrl}} thumbnail={placeHolderImage} style={style.contactImage} />
-              :
-              <EmptyProfileImage
-                firstName={this.props.data.firstName}
-                lastName={this.props.data.lastName}
-                textSize={16}
-                style={style.placeHolder}
+              this.props.data.avatarUrl &&
+              <Image 
+                style={[style.contactImage, {resizeMode: 'contain', position: 'absolute', zIndex: 10}]} 
+                source={{uri: this.props.data.avatarUrl}}
+                onLoad={() => this._imageLoadComplete()}
               />
             }
           </View>

app/screens/contact/contactCell/styles.js

@@ -19,10 +19,10 @@ const style = StyleSheet.create({
     // backgroundColor: 'red',
   },
   contactImage: {
-    width: 60,
-    height: 60,
+    width: AVATAR_SIZE,
+    height: AVATAR_SIZE,
     borderWidth: 1,    
-    borderRadius: 30,
+    borderRadius: AVATAR_SIZE / 2,
     // shadowRadius: 5,
     // shadowColor: 'black',
     // shadowOpacity: 0.6,
@@ -110,19 +110,7 @@ const style = StyleSheet.create({
     zIndex: 10,
     backgroundColor: colors.LIGHT_GRAY,
   },
-  placeHolder: {
-    marginBottom: 5,
-    width: AVATAR_SIZE,
-    height: AVATAR_SIZE,
-    borderRadius: AVATAR_SIZE / 2,
-    borderWidth: 1,    
-    borderRadius: AVATAR_SIZE / 2,
-    // shadowRadius: 5,
-    // shadowColor: 'black',
-    // shadowOpacity: 0.6,
-    borderColor: colors.LIGHT_GRAY,
-    // shadowOffset: { width: 0, height: 0 }  
-  },
+
 });
 
 export default style;

app/screens/profile/profile.js

@@ -145,16 +145,14 @@ class ProfileScreen extends Component {
               </View>
               }
               <View style={ style.photoContainer }>
+                <EmptyProfileImage
+                  firstName={this.data.firstName}
+                  lastName={this.data.lastName}
+                  textSize={38}
+                  style={style.avatar}
+                />
                 {
-                  this.data.avatarUrl ?
-                  <Image style={[style.avatar, {resizeMode: 'contain'}]} source={{uri: this.data.avatarUrl}}/>
-                  :
-                  <EmptyProfileImage
-                    firstName={this.data.firstName}
-                    lastName={this.data.lastName}
-                    textSize={38}
-                    style={style.placeHolder}
-                  />
+                  <Image style={[style.avatar, {resizeMode: 'contain', position: 'absolute', top: 64}]} source={{uri: this.data.avatarUrl}}/>
                 }
               </View>
               { !this.props.data.fromProfileTab &&

app/screens/profile/styles.js

@@ -80,7 +80,7 @@ const style = StyleSheet.create({
     flexDirection: 'column',
   },
   avatar: {
-    marginBottom: 5,
+    marginBottom: 4,
     width: AVATAR_SIZE,
     height: AVATAR_SIZE,
     borderRadius: AVATAR_SIZE / 2,