Merge pull request #2631 from ecency/nt/post-screen-spinners

Nt/post screen spinners

src/components/postComments/container/postComments.tsx

@@ -42,7 +42,7 @@ const PostComments = forwardRef(
       permlink,
       mainAuthor,
       postContentView,
-      isLoading,
+      isPostLoading,
       onRefresh,
       handleOnCommentsLoaded,
       handleOnReplyPress,
@@ -67,7 +67,6 @@ const PostComments = forwardRef(
 
     const [selectedFilter, setSelectedFilter] = useState('trending');
     const [selectedOptionIndex, setSelectedOptionIndex] = useState(0);
-    const [shouldRenderComments, setShouldRenderComments] = useState(false);
     const [headerHeight, setHeaderHeight] = useState(0);
 
 
@@ -84,7 +83,7 @@ const PostComments = forwardRef(
         }
       },
       scrollToComments: () => {
-        if (commentsListRef.current && (!sortedSections.length || !shouldRenderComments)) {
+        if (commentsListRef.current && !sortedSections.length) {
           commentsListRef.current.scrollToOffset({ offset: headerHeight + 200 });
         } else if (commentsListRef.current && sortedSections.length) {
           commentsListRef.current.scrollToIndex({ index: 0, viewOffset: 108 });
@@ -233,10 +232,9 @@ const PostComments = forwardRef(
 
 
     const _onContentSizeChange = (x: number, y: number) => {
-      // lazy render comments after post is rendered;
-      if (!shouldRenderComments) {
+      // update header height
+      if (y !== headerHeight) {
         setHeaderHeight(y);
-        setShouldRenderComments(true);
       }
     };
 
@@ -245,7 +243,7 @@ const PostComments = forwardRef(
     const _postContentView = (
       <>
         {postContentView && postContentView}
-        {!isLoading && (
+        {!isPostLoading && (
           <FilterBar
             dropdownIconName="arrow-drop-down"
             options={VALUE.map((val) => intl.formatMessage({ id: `comment_filter.${val}` }))}
@@ -260,6 +258,11 @@ const PostComments = forwardRef(
     );
 
     const _renderEmptyContent = () => {
+
+      if(isPostLoading){
+        return null;
+      }
+
       if (discussionQuery.isLoading || !!sortedSections.length) {
         return (
           <ActivityIndicator style={{ marginTop: 16 }} color={EStyleSheet.value('$primaryBlack')} />
@@ -308,7 +311,7 @@ const PostComments = forwardRef(
           contentContainerStyle={styles.listContent}
           ListHeaderComponent={_postContentView}
           ListEmptyComponent={_renderEmptyContent}
-          data={shouldRenderComments ? sortedSections : []}
+          data={isPostLoading ? [] : sortedSections}
           onContentSizeChange={_onContentSizeChange}
           renderItem={_renderItem}
           keyExtractor={(item) => `${item.author}/${item.permlink}`}

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

@@ -1,12 +1,11 @@
 import React, { Fragment, useState, useEffect, useRef } from 'react';
-import { Linking, Modal, PermissionsAndroid, Platform, View } from 'react-native';
+import { Modal, PermissionsAndroid, Platform, View } from 'react-native';
 import CameraRoll from '@react-native-community/cameraroll';
-import { useIntl, injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import EStyleSheet from 'react-native-extended-stylesheet';
 import ImageViewer from 'react-native-image-zoom-viewer';
 import RNFetchBlob from 'rn-fetch-blob';
 import ActionSheetView from 'react-native-actions-sheet';
-import { connect } from 'react-redux';
 
 // Services and Actions
 import { useNavigation } from '@react-navigation/native';
@@ -20,12 +19,14 @@ import { isCommunity } from '../../../../utils/communityValidation';
 import { GLOBAL_POST_FILTERS_VALUE } from '../../../../constants/options/filters';
 import { PostHtmlRenderer, VideoPlayer } from '../../..';
 import getWindowDimensions from '../../../../utils/getWindowDimensions';
+import { useAppDispatch } from '../../../../hooks';
 
 const WIDTH = getWindowDimensions().width;
 
-const PostBody = ({ body, dispatch, onLoadEnd, width }) => {
+const PostBody = ({ body, onLoadEnd, width }) => {
   console.log('body : ', body);
   const navigation = useNavigation();
+  const dispatch = useAppDispatch();
 
   const [isImageModalOpen, setIsImageModalOpen] = useState(false);
 
@@ -341,6 +342,5 @@ const areEqual = (prevProps, nextProps) => {
   return false;
 };
 
-const mapStateToProps = (state) => ({});
 
-export default React.memo(injectIntl(connect(mapStateToProps)(PostBody)), areEqual);
+export default React.memo(PostBody, areEqual);

src/components/postView/view/postDisplayView.tsx

@@ -303,7 +303,7 @@ const PostDisplayView = ({
           handleOnReplyPress={_showQuickReplyModal}
           handleOnCommentsLoaded={_handleOnCommentsLoaded}
           fetchedAt={post?.post_fetched_at}
-          isLoading={postBodyLoading}
+          isPostLoading={postBodyLoading}
           postContentView={_postContentView}
           onRefresh={onRefresh}
           onUpvotePress={_onUpvotePress}