move pagination size to getInitialPaginationSize

src/CONST.ts

@@ -3164,6 +3164,9 @@ const CONST = {
     MINI_CONTEXT_MENU_MAX_ITEMS: 4,
 
     REPORT_FIELD_TITLE_FIELD_ID: 'text_title',
+
+    MOBILE_PAGINATION_SIZE: 15,
+    WEB_PAGINATION_SIZE: 50
 } as const;
 
 type Country = keyof typeof CONST.ALL_COUNTRIES;

src/pages/home/report/ReportActionsList.js

@@ -501,10 +501,11 @@ function ReportActionsList({
     const extraData = [isSmallScreenWidth ? currentUnreadMarker : undefined, ReportUtils.isArchivedRoom(report)];
     const hideComposer = !ReportUtils.canUserPerformWriteAction(report);
     const shouldShowReportRecipientLocalTime = ReportUtils.canShowReportRecipientLocalTime(personalDetailsList, report, currentUserPersonalDetails.accountID) && !isComposerFullSize;
+    const canShowHeader = !isOffline && !hasHeaderRendered.current && scrollingVerticalOffset.current > VERTICAL_OFFSET_THRESHOLD;
 
     const contentContainerStyle = useMemo(
-        () => [styles.chatContentScrollView, isLoadingNewerReportActions ? styles.chatContentScrollViewWithHeaderLoader : {}],
-        [isLoadingNewerReportActions, styles.chatContentScrollView, styles.chatContentScrollViewWithHeaderLoader],
+        () => [styles.chatContentScrollView, isLoadingNewerReportActions && canShowHeader ? styles.chatContentScrollViewWithHeaderLoader : {}],
+        [isLoadingNewerReportActions, styles.chatContentScrollView, styles.chatContentScrollViewWithHeaderLoader, canShowHeader],
     );
 
     const lastReportAction = useMemo(() => _.last(sortedReportActions) || {}, [sortedReportActions]);
@@ -542,7 +543,7 @@ function ReportActionsList({
     );
 
     const listHeaderComponent = useCallback(() => {
-        if (!isOffline && !hasHeaderRendered.current) {
+        if (!canShowHeader) {
             hasHeaderRendered.current = true;
             return null;
         }
@@ -553,7 +554,7 @@ function ReportActionsList({
                 isLoadingNewerReportActions={isLoadingNewerReportActions}
             />
         );
-    }, [isLoadingNewerReportActions, isOffline]);
+    }, [isLoadingNewerReportActions, canShowHeader]);
 
     // When performing comment linking, initially 25 items are added to the list. Subsequent fetches add 15 items from the cache or 50 items from the server.
     // This is to ensure that the user is able to see the 'scroll to newer comments' button when they do comment linking and have not reached the end of the list yet.

src/pages/home/report/ReportActionsView.js

@@ -25,6 +25,7 @@ import * as Report from '@userActions/Report';
 import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import getInitialPaginationSize from './getInitialPaginationSize';
 import PopoverReactionList from './ReactionList/PopoverReactionList';
 import reportActionPropTypes from './reportActionPropTypes';
 import ReportActionsList from './ReportActionsList';
@@ -84,7 +85,6 @@ const defaultProps = {
 
 const DIFF_BETWEEN_SCREEN_HEIGHT_AND_LIST = 120;
 const SPACER = 16;
-const PAGINATION_SIZE = 15;
 
 let listIDCount = Math.round(Math.random() * 100);
 
@@ -138,7 +138,8 @@ const usePaginatedReportActionList = (linkedID, allReportActions, fetchNewerRepo
         if (isFirstLinkedActionRender.current) {
             return allReportActions.slice(index, allReportActions.length);
         }
-        const newStartIndex = index >= PAGINATION_SIZE ? index - PAGINATION_SIZE : 0;
+        const paginationSize = getInitialPaginationSize(allReportActions.length - index);
+        const newStartIndex = index >= paginationSize ? index - paginationSize : 0;
         return newStartIndex ? allReportActions.slice(newStartIndex, allReportActions.length) : allReportActions;
         // currentReportActionID is needed to trigger batching once the report action has been positioned
         // eslint-disable-next-line react-hooks/exhaustive-deps

src/pages/home/report/getInitialPaginationSize/index.native.ts

@@ -0,0 +1,6 @@
+import CONST from '@src/CONST';
+
+function getInitialPaginationSize(): number {
+    return CONST.MOBILE_PAGINATION_SIZE;
+}
+export default getInitialPaginationSize;

src/pages/home/report/getInitialPaginationSize/index.ts

@@ -0,0 +1,14 @@
+import * as Browser from '@libs/Browser';
+import CONST from '@src/CONST';
+
+const isMobileChrome = Browser.isMobileChrome();
+const isMobileSafari = Browser.isMobileSafari();
+
+function getInitialPaginationSize(numToRender: number): number {
+    if (isMobileChrome || isMobileSafari) {
+        return Math.round(Math.min(numToRender / 3, CONST.MOBILE_PAGINATION_SIZE));
+    }
+    // WEB: Calculate and position it correctly for each frame, enabling the rendering of up to 50 items.
+    return CONST.WEB_PAGINATION_SIZE;
+}
+export default getInitialPaginationSize;