From 6b259da067cd2858b199e92fdbe1b5e5e67341fc Mon Sep 17 00:00:00 2001
From: Nouman Tahir <nouman.hawkdev@gmail.com>
Date: Fri, 5 Mar 2021 16:55:40 +0500
Subject: [PATCH] applied post detail animation and using color filters

---
 .../placeHolder/postCardPlaceHolderView.js    | 31 ++++++++++++++++---
 .../view/placeHolder/postPlaceHolderView.js   | 25 +++++++++++++--
 src/components/posts/view/postsView.js        | 19 ++++++------
 3 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/src/components/basicUIElements/view/placeHolder/postCardPlaceHolderView.js b/src/components/basicUIElements/view/placeHolder/postCardPlaceHolderView.js
index af555be81..7d956db8c 100644
--- a/src/components/basicUIElements/view/placeHolder/postCardPlaceHolderView.js
+++ b/src/components/basicUIElements/view/placeHolder/postCardPlaceHolderView.js
@@ -1,19 +1,42 @@
 import React from 'react';
-import { View } from 'react-native';
+import { View, Dimensions } from 'react-native';
 import Placeholder from 'rn-placeholder';
 
 import { ThemeContainer } from '../../../../containers';
+import LottieView from 'lottie-react-native';
 
 import styles from './postCardPlaceHolderStyles';
 // TODO: make container for place holder wrapper after alpha
 const PostCardPlaceHolder = () => {
+  
+  const animationStyle = {
+    width:Dimensions.get('screen').width - 32
+  }
+
+
   return (
     <ThemeContainer>
       {({ isDarkTheme }) => {
         const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
         return (
           <View style={styles.container}>
-            <View style={styles.textWrapper}>
+          <LottieView
+            style={animationStyle}
+            source={require('../../../../assets/animations/postList.json')}
+            autoPlay
+            loop={true}
+            autoSize={true}
+            resizeMode='cover'
+            colorFilters={[
+              {
+                keypath:'postList',
+                color:color
+              }
+            ]
+            }
+          />
+
+            {/* <View style={styles.textWrapper}>
               <Placeholder.Media size={35} hasRadius animate="fade" color={color} />
               <Placeholder.Line width="30%" lastLineWidth="30%" animate="fade" color={color} />
             </View>
@@ -29,11 +52,11 @@ const PostCardPlaceHolder = () => {
                 firstLineWidth="50%"
                 animate="fade"
               />
-            </View>
+            </View> */}
           </View>
         );
       }}
     </ThemeContainer>
   );
 };
-export default PostCardPlaceHolder;
+export default PostCardPlaceHolder;
\ No newline at end of file
diff --git a/src/components/basicUIElements/view/placeHolder/postPlaceHolderView.js b/src/components/basicUIElements/view/placeHolder/postPlaceHolderView.js
index 1324dbcf9..af4379458 100644
--- a/src/components/basicUIElements/view/placeHolder/postPlaceHolderView.js
+++ b/src/components/basicUIElements/view/placeHolder/postPlaceHolderView.js
@@ -1,8 +1,9 @@
 import React from 'react';
-import { View } from 'react-native';
+import { View, Dimensions } from 'react-native';
 import Placeholder from 'rn-placeholder';
 
 import { ThemeContainer } from '../../../../containers';
+import LottieView from 'lottie-react-native';
 
 import styles from './postCardPlaceHolderStyles';
 
@@ -14,7 +15,25 @@ const PostPlaceHolder = () => {
 
         return (
           <View>
-            <View style={styles.paragraphWrapper}>
+    
+            <LottieView
+              style={{width:Dimensions.get('screen').width - 24}}
+              source={require('../../../../assets/animations/postBody.json')}
+              autoPlay
+              loop={true}
+              autoSize={true}
+              resizeMode='cover'
+              colorFilters={[
+                {
+                  keypath:'layer1',
+                  color:color
+                }
+              ]
+
+              }
+            />
+  
+            {/* <View style={styles.paragraphWrapper}>
               <Placeholder.Paragraph
                 color={color}
                 lineNumber={2}
@@ -39,7 +58,7 @@ const PostPlaceHolder = () => {
                 firstLineWidth="50%"
                 animate="fade"
               />
-            </View>
+            </View> */}
           </View>
         );
       }}
diff --git a/src/components/posts/view/postsView.js b/src/components/posts/view/postsView.js
index 76d786d45..cbd502fc6 100644
--- a/src/components/posts/view/postsView.js
+++ b/src/components/posts/view/postsView.js
@@ -15,7 +15,7 @@ import {
   CommunityListItem,
 } from '../../basicUIElements';
 import { ThemeContainer } from '../../../containers';
-import LottieView from 'lottie-react-native';
+
 
 // Styles
 import styles from './postsStyles';
@@ -23,7 +23,6 @@ import { default as ROUTES } from '../../../constants/routeNames';
 import globalStyles from '../../../globalStyles';
 import PostsList from '../../postsList';
 import { isDarkTheme } from '../../../redux/actions/applicationActions';
-import { Dimensions } from 'react-native';
 
 let _onEndReachedCalledDuringMomentum = true;
 
@@ -229,14 +228,14 @@ const PostsView = ({
 
     return (
       <View style={styles.placeholderWrapper}>
-        <LottieView
-          style={{width:Dimensions.get('screen').width}}
-          source={require('../../../assets/animations/postList.json')}
-          autoPlay
-          loop={true}
-          autoSize={true}
-          resizeMode='cover'
-        />
+        {/* TOOD: improve empty list holder*/}
+
+        <PostCardPlaceHolder />
+        {/* <PostCardPlaceHolder /> */}
+        {/* <PostCardPlaceHolder /> */}
+        {/* <PostCardPlaceHolder /> */}
+        {/* <PostCardPlaceHolder />  */}
+
       </View>
     );
   };