removed timeout - using post body loading flag to render footer content

src/components/postElements/body/view/postBodyView.js

@@ -31,6 +31,7 @@ const PostBody = ({
   handleOnUserPress,
   handleOnPostPress,
   dispatch,
+  onLoadEnd,
 }) => {
   const [isImageModalOpen, setIsImageModalOpen] = useState(false);
   const [postImages, setPostImages] = useState([]);
@@ -41,7 +42,7 @@ const PostBody = ({
   const intl = useIntl();
   const actionImage = useRef(null);
   const actionLink = useRef(null);
-  const [isLoading, setIsLoading] = useState(true);
+  // const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     if (selectedLink) {
@@ -294,9 +295,9 @@ const PostBody = ({
   };
 
   const _handleLoadEnd = () => {
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 200);
+    if (onLoadEnd) {
+      onLoadEnd();
+    }
   };
 
   const customStyle = `
@@ -461,7 +462,7 @@ const PostBody = ({
           handleLinkPress(index);
         }}
       />
-      {isLoading && (isComment ? <CommentPlaceHolder /> : <PostPlaceHolder />)}
+      {/* {isLoading && (isComment ? <CommentPlaceHolder /> : <PostPlaceHolder />)} */}
       <AutoHeightWebView
         source={{ html }}
         allowsFullscreenVideo={true}
@@ -470,6 +471,7 @@ const PostBody = ({
         onMessage={_handleOnLinkPress}
         customScript={customBodyScript}
         startInLoadingState={true}
+        renderLoading={() => (isComment ? <CommentPlaceHolder /> : <PostPlaceHolder />)}
         onShouldStartLoadWithRequest={false}
         scrollEnabled={false}
         scalesPageToFit={false}

src/components/postView/view/postDisplayView.js

@@ -48,6 +48,7 @@ const PostDisplayView = ({
   const [isLoadedComments, setIsLoadedComments] = useState(false);
   const actionSheet = useRef(null);
   const [refreshing, setRefreshing] = useState(false);
+  const [postBodyLoading, setPostBodyLoading] = useState(false);
 
   // Component Life Cycles
   useEffect(() => {
@@ -59,6 +60,7 @@ const PostDisplayView = ({
   // Component Functions
   const onRefresh = useCallback(() => {
     setRefreshing(true);
+    setPostBodyLoading(true);
     fetchPost().then(() => setRefreshing(false));
   }, [refreshing]);
 
@@ -183,6 +185,10 @@ const PostDisplayView = ({
     );
   }
 
+  const _handleOnPostBodyLoad = () => {
+    setPostBodyLoading(false);
+  };
+
   return (
     <View style={styles.container}>
       <ScrollView
@@ -207,20 +213,22 @@ const PostDisplayView = ({
                 content={post}
                 size={36}
               />
-              <PostBody body={post.body} />
-              <View style={styles.footer}>
-                <Tags tags={post.json_metadata && post.json_metadata.tags} />
-                <Text style={styles.footerText}>
-                  Posted by
-                  <Text style={styles.footerName}>{` ${author || post.author} `}</Text>
-                  {formatedTime}
-                </Text>
-                {/* {isPostEnd && this._getTabBar()} */}
-              </View>
+              <PostBody body={post.body} onLoadEnd={_handleOnPostBodyLoad} />
+              {!postBodyLoading && (
+                <View style={styles.footer}>
+                  <Tags tags={post.json_metadata && post.json_metadata.tags} />
+                  <Text style={styles.footerText}>
+                    Posted by
+                    <Text style={styles.footerName}>{` ${author || post.author} `}</Text>
+                    {formatedTime}
+                  </Text>
+                  {/* {isPostEnd && this._getTabBar()} */}
+                </View>
+              )}
             </View>
           )}
         </View>
-        {post && (isGetComment || isLoadedComments) && (
+        {post && !postBodyLoading && (isGetComment || isLoadedComments) && (
           <CommentsDisplay
             author={author || post.author}
             mainAuthor={author || post.author}