diff --git a/src/CONST.ts b/src/CONST.ts
index ff3934c31943..18806bd0cf59 100755
--- a/src/CONST.ts
+++ b/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;
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index 4f2939c553ac..7f4d1228e17f 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/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.
diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
index ad0657818c18..ec227f21518c 100755
--- a/src/pages/home/report/ReportActionsView.js
+++ b/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
diff --git a/src/pages/home/report/getInitialPaginationSize/index.native.ts b/src/pages/home/report/getInitialPaginationSize/index.native.ts
new file mode 100644
index 000000000000..69dbf5025ac5
--- /dev/null
+++ b/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;
diff --git a/src/pages/home/report/getInitialPaginationSize/index.ts b/src/pages/home/report/getInitialPaginationSize/index.ts
new file mode 100644
index 000000000000..3ec971738977
--- /dev/null
+++ b/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;