added place holder for boost

src/components/basicUIElements/view/placeHolder/boostPlaceHolderStyles.js

@@ -6,10 +6,13 @@ export default EStyleSheet.create({
     borderColor: '$primaryLightBackground',
     marginRight: 0,
     marginLeft: 0,
-    flex: 1,
-    flexDirection: 'row',
+    flexDirection: 'column',
   },
   paragraphWrapper: {
     marginLeft: 50,
   },
+  line: {
+    flexDirection: 'row',
+    marginVertical: 10,
+  },
 });

src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js

@@ -1,5 +1,5 @@
 /* eslint-disable radix */
-import React, { Fragment } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import { Dimensions, View } from 'react-native';
 import times from 'lodash/times';
@@ -11,15 +11,17 @@ const HEIGHT = Dimensions.get('window').height;
 
 const BoostPlaceHolder = ({ isDarkTheme }) => {
   const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
-  const ratio = (HEIGHT - 300) / 50;
+  const ratio = (HEIGHT - 300) / 50 / 1.3;
   const listElements = [];
 
   times(parseInt(ratio), i => {
     listElements.push(
-      <View key={i}>
-        <Placeholder.Box width={90} height={40} />
+      <View style={styles.container} key={i}>
+        <View style={styles.line}>
+          <Placeholder.Box color={color} width={90} height={40} animate="fade" />
           <View style={styles.paragraphWrapper}>
-          <Placeholder.Box width={120} radius={20} height={40} />
+            <Placeholder.Box color={color} width={120} radius={20} height={40} animate="fade" />
+          </View>
         </View>
       </View>,
     );

src/screens/boost/screen/boostScreen.js

@@ -62,7 +62,7 @@ class BoostScreen extends PureComponent {
           })}
         />
 
-        {true ? (
+        {isLoading ? (
           <BoostPlaceHolder />
         ) : (
           productList.map(item => (