fix loop

margelo · Sep 17, 2023 · fe22397 · fe22397
1 parent 35076a4
commit fe22397
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 14 deletions.
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
@@ -285,6 +285,11 @@ function ReportActionsList({
     const hideComposer = ReportUtils.shouldDisableWriteActions(report);
     const shouldShowReportRecipientLocalTime = ReportUtils.canShowReportRecipientLocalTime(personalDetailsList, report, currentUserPersonalDetails.accountID) && !isComposerFullSize;
 
+    const contentContainerStyle = useMemo(
+        () => [styles.chatContentScrollView, report.isLoadingNewerReportActions ? styles.chatContentScrollViewWithHeaderLoader : {}],
+        [report.isLoadingNewerReportActions],
+    );
+
     return (
         <>
             <FloatingMessageCounter
@@ -297,7 +302,7 @@ function ReportActionsList({
                     ref={reportScrollManager.ref}
                     data={sortedReportActions}
                     renderItem={renderItem}
-                    contentContainerStyle={styles.chatContentScrollView}
+                    contentContainerStyle={contentContainerStyle}
                     keyExtractor={keyExtractor}
                     initialRowHeight={32}
                     initialNumToRender={initialNumToRender}
@@ -325,6 +330,20 @@ function ReportActionsList({
 
                         return null;
                     }}
+                    ListHeaderComponent={() => {
+                        if (report.isLoadingNewerReportActions) {
+                            return (
+                                <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.bottomReportLoader, styles.chatBottomLoader]}>
+                                    <ActivityIndicator
+                                        color={themeColors.spinner}
+                                        size="small"
+                                    />
+                                </View>
+                            );
+                        }
+
+                        return null;
+                    }}
                     keyboardShouldPersistTaps="handled"
                     onLayout={(event) => {
                         setSkeletonViewHeight(event.nativeEvent.layout.height);
@@ -334,14 +353,6 @@ function ReportActionsList({
                     extraData={extraData}
                 />
             </Animated.View>
-            {report.isLoadingNewerReportActions ? (
-                <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.bottomReportLoader]}>
-                    <ActivityIndicator
-                        color={themeColors.spinner}
-                        size="small"
-                    />
-                </View>
-            ) : null}
         </>
     );
 }

diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
@@ -1,4 +1,4 @@
-import React, {useRef, useEffect, useContext, useMemo, useCallback} from 'react';
+import React, {useRef, useEffect, useContext, useMemo} from 'react';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
@@ -61,6 +61,7 @@ function ReportActionsView(props) {
     const didLayout = useRef(false);
     const isFirstRender = useRef(true);
     const didSubscribeToReportTypingEvents = useRef(false);
+    const [isFetchNewerWasCalled, setFetchNewerWasCalled] = React.useState(false);
     const hasCachedActions = useRef(_.size(props.reportActions) > 0);
 
     const mostRecentIOUReportActionID = useRef(ReportActionsUtils.getMostRecentIOURequestActionID(props.reportActions));
@@ -157,15 +158,18 @@ function ReportActionsView(props) {
      * Retrieves the next set of report actions for the chat once we are nearing the end of what we are currently
      * displaying.
      */
-    const loadNewerChats = () => {
+    const loadNewerChats = ({distanceFromStart}) => {
         // 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) {
+        if (props.report.isLoadingNewerReportActions || props.report.isLoadingReportActions) {
             isFirstRender.current = false;
             return;
         }
 
+        if ((!isFetchNewerWasCalled.current && !isFetchNewerWasCalled) || distanceFromStart <= 36) {
+            setFetchNewerWasCalled(true);
+            return;
+        }
         const newestReportAction = _.first(props.reportActions);
-
         Report.getNewerAction(reportID, newestReportAction.reportActionID);
     };
 
@@ -234,6 +238,7 @@ function arePropsEqual(oldProps, newProps) {
     if (oldProps.report.isLoadingOlderReportActions !== newProps.report.isLoadingOlderReportActions) {
         return false;
     }
+
     if (oldProps.report.isLoadingNewerReportActions !== newProps.report.isLoadingNewerReportActions) {
         return false;
     }

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -1598,6 +1598,11 @@ const styles = (theme) => ({
         justifyContent: 'flex-start',
         paddingBottom: 16,
     },
+    chatContentScrollViewWithHeaderLoader: {
+        padding: 40,
+        paddingLeft: 0,
+        paddingRight: 0,
+    },
 
     // Chat Item
     chatItem: {
@@ -3960,7 +3965,15 @@ const styles = (theme) => ({
         width: '100%',
     },
     bottomReportLoader: {
-      height: 40,
+        height: 36,
+    },
+    chatBottomLoader: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: 36,
     },
 });