maxToRenderPerBatch=5

src/components/InvertedFlatList/BaseInvertedFlatList.js

@@ -137,12 +137,11 @@ class BaseInvertedFlatList extends Component {
                 // Web requires that items be measured or else crazy things happen when scrolling.
                 getItemLayout={this.props.shouldMeasureItems ? this.getItemLayout : undefined}
                 // We keep this property very low so that chat switching remains fast
-                maxToRenderPerBatch={1}
+                maxToRenderPerBatch={5}
                 windowSize={15}
 
                 // Commenting the line below as it breaks the unread indicator test
                 // we will look at fixing/reusing this after RN v0.72
-                // maintainVisibleContentPosition={{minIndexForVisible: 0, autoscrollToTopThreshold: 0}}
                 maintainVisibleContentPosition={{
                     minIndexForVisible: 0,
                 }}

src/pages/home/report/ReportActionsList.js

@@ -323,6 +323,13 @@ function ReportActionsList({
 
                         return null;
                     }}
+                    ListHeaderComponent={() => {
+                        if (report.isLoadingOlderReportActions) {
+                            return <ReportActionsSkeletonView containerHeight={CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT * 3} />;
+                        }
+
+                        return null;
+                    }}
                     keyboardShouldPersistTaps="handled"
                     onLayout={(event) => {
                         setSkeletonViewHeight(event.nativeEvent.layout.height);

src/pages/home/report/ReportActionsView.js

@@ -133,51 +133,41 @@ function ReportActionsView(props) {
         }
     }, [props.report, didSubscribeToReportTypingEvents, reportID]);
 
-    const {oldestReportAction, newestReportAction} = useMemo(() => {
-        const lengthOfReportActions = props.reportActions.length;
-        if (lengthOfReportActions === 0) {
-          return {
-              oldestReportAction: null,
-              newestReportAction: null,
-          };
-        }
-        return {
-            oldestReportAction: props.reportActions[0],
-            newestReportAction: props.reportActions[lengthOfReportActions - 1],
-        };
-    }, [props.reportActions]);
-
     /**
      * Retrieves the next set of report actions for the chat once we are nearing the end of what we are currently
      * displaying.
      */
-    const loadOlderChats = useCallback(() => {
+    const loadOlderChats = () => {
         // Only fetch more if we are not already fetching so that we don't initiate duplicate requests.
         if (props.report.isLoadingOlderReportActions) {
             return;
         }
 
+        const oldestReportAction = _.last(props.reportActions);
+
         // Don't load more chats if we're already at the beginning of the chat history
         if (oldestReportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
             return;
         }
         // Retrieve the next REPORT.ACTIONS.LIMIT sized page of comments
         Report.getOlderAction(reportID, oldestReportAction.reportActionID);
-    }, [props.report.isLoadingOlderReportActions, oldestReportAction]);
+    };
 
     /**
      * Retrieves the next set of report actions for the chat once we are nearing the end of what we are currently
      * displaying.
      */
-    const loadNewerChats = useCallback(() => {
+    const loadNewerChats = () => {
         // Only fetch more if we are not already fetching so that we don't initiate duplicate requests.
         if (props.report.isLoadingNewerReportActions || isFirstRender.current || props.report.isLoadingReportActions || props.report.isLoadingOlderReportActions) {
             isFirstRender.current = false;
             return;
         }
 
+        const newestReportAction = _.first(props.reportActions);
+
         Report.getNewerAction(reportID, newestReportAction.reportActionID);
-    }, [props.report.isLoadingNewerReportActions, props.report.isLoadingReportActions, props.report.isLoadingOlderReportActions, props.reportActions, newestReportAction]);
+    };
 
     /**
      * Runs when the FlatList finishes laying out