From c95398cc15aa1903886806d7ca59308edb85313d Mon Sep 17 00:00:00 2001
From: Janic Duplessis <janicduplessis@gmail.com>
Date: Fri, 19 Apr 2024 15:39:05 -0400
Subject: [PATCH 1/3] Handle pagination errors in chats

---
 src/languages/en.ts                          |   4 +
 src/languages/es.ts                          |   4 +
 src/libs/API/types.ts                        |   2 +-
 src/libs/actions/Report.ts                   |   6 +
 src/pages/home/ReportScreen.tsx              |   4 +
 src/pages/home/report/ListBoundaryLoader.tsx |  49 ++++-
 src/pages/home/report/ReportActionsList.tsx  |  44 +++-
 src/pages/home/report/ReportActionsView.tsx  | 199 ++++++++++++-------
 src/styles/index.ts                          |  11 +-
 src/types/onyx/ReportMetadata.ts             |   6 +
 10 files changed, 244 insertions(+), 85 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index 5e2d1360e816..805d3a51de62 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -2938,4 +2938,8 @@ export default {
         offline:
             "You appear to be offline. Unfortunately, Expensify Classic doesn't work offline, but New Expensify does. If you prefer to use Expensify Classic, try again when you have an internet connection.",
     },
+    listBoundary: {
+        errorMessage: 'There was an error loading more messages.',
+        tryAgain: 'Try again',
+    },
 } satisfies TranslationBase;
diff --git a/src/languages/es.ts b/src/languages/es.ts
index d82fabb80799..f3bb47b5afd3 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -3434,4 +3434,8 @@ export default {
         offline:
             'Parece que estás desconectado. Desafortunadamente, Expensify Classic no funciona sin conexión, pero New Expensify sí. Si prefieres utilizar Expensify Classic, inténtalo de nuevo cuando tengas conexión a internet.',
     },
+    listBoundary: {
+        errorMessage: 'Se produjo un error al cargar más mensajes.',
+        tryAgain: 'Inténtalo de nuevo',
+    },
 } satisfies EnglishTranslation;
diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts
index b38ef2b1f7c6..5c8be2dbe8c3 100644
--- a/src/libs/API/types.ts
+++ b/src/libs/API/types.ts
@@ -193,7 +193,7 @@ const WRITE_COMMANDS = {
     ACCEPT_JOIN_REQUEST: 'AcceptJoinRequest',
     DECLINE_JOIN_REQUEST: 'DeclineJoinRequest',
     CREATE_POLICY_TAX: 'CreatePolicyTax',
-    UPDATE_POLICY_CONNECTION_CONFIG: 'UpdatePolicyConnectionConfiguration',
+    UPDATE_POLICY_CONNECTION_CONFIG: 'UpdatePolicyConnectionConfig',
     REMOVE_POLICY_CONNECTION: 'RemovePolicyConnection',
     SET_POLICY_TAXES_ENABLED: 'SetPolicyTaxesEnabled',
     DELETE_POLICY_TAXES: 'DeletePolicyTaxes',
diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts
index 34335c797212..00f3935fb3d8 100644
--- a/src/libs/actions/Report.ts
+++ b/src/libs/actions/Report.ts
@@ -696,7 +696,9 @@ function openReport(
             value: {
                 isLoadingInitialReportActions: true,
                 isLoadingOlderReportActions: false,
+                hasLoadingOlderReportActionsError: false,
                 isLoadingNewerReportActions: false,
+                hasLoadingNewerReportActionsError: false,
                 lastVisitTime: DateUtils.getDBTime(),
             },
         },
@@ -988,6 +990,7 @@ function getOlderActions(reportID: string, reportActionID: string) {
             key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`,
             value: {
                 isLoadingOlderReportActions: true,
+                hasLoadingOlderReportActionsError: false,
             },
         },
     ];
@@ -1008,6 +1011,7 @@ function getOlderActions(reportID: string, reportActionID: string) {
             key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`,
             value: {
                 isLoadingOlderReportActions: false,
+                hasLoadingOlderReportActionsError: true,
             },
         },
     ];
@@ -1031,6 +1035,7 @@ function getNewerActions(reportID: string, reportActionID: string) {
             key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`,
             value: {
                 isLoadingNewerReportActions: true,
+                hasLoadingNewerReportActionsError: false,
             },
         },
     ];
@@ -1051,6 +1056,7 @@ function getNewerActions(reportID: string, reportActionID: string) {
             key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`,
             value: {
                 isLoadingNewerReportActions: false,
+                hasLoadingNewerReportActionsError: true,
             },
         },
     ];
diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx
index aa7c623ac2b4..e02a8d1ee115 100644
--- a/src/pages/home/ReportScreen.tsx
+++ b/src/pages/home/ReportScreen.tsx
@@ -137,7 +137,9 @@ function ReportScreen({
     reportMetadata = {
         isLoadingInitialReportActions: true,
         isLoadingOlderReportActions: false,
+        hasLoadingOlderReportActionsError: false,
         isLoadingNewerReportActions: false,
+        hasLoadingNewerReportActionsError: false,
     },
     parentReportActions,
     accountManagerReportID,
@@ -696,7 +698,9 @@ function ReportScreen({
                                         parentReportAction={parentReportAction}
                                         isLoadingInitialReportActions={reportMetadata?.isLoadingInitialReportActions}
                                         isLoadingNewerReportActions={reportMetadata?.isLoadingNewerReportActions}
+                                        hasLoadingNewerReportActionsError={reportMetadata?.hasLoadingNewerReportActionsError}
                                         isLoadingOlderReportActions={reportMetadata?.isLoadingOlderReportActions}
+                                        hasLoadingOlderReportActionsError={reportMetadata?.hasLoadingOlderReportActionsError}
                                         isReadyForCommentLinking={!shouldShowSkeleton}
                                         transactionThreadReportID={transactionThreadReportID}
                                     />
diff --git a/src/pages/home/report/ListBoundaryLoader.tsx b/src/pages/home/report/ListBoundaryLoader.tsx
index a359606b9ed5..8081e18bb668 100644
--- a/src/pages/home/report/ListBoundaryLoader.tsx
+++ b/src/pages/home/report/ListBoundaryLoader.tsx
@@ -1,7 +1,10 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import type {ValueOf} from 'type-fest';
+import Button from '@components/Button';
 import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -22,6 +25,12 @@ type ListBoundaryLoaderProps = {
 
     /** Name of the last report action */
     lastReportActionName?: string;
+
+    /** Shows if there was an error when loading report actions */
+    hasError?: boolean;
+
+    /** Function to retry if there was an error */
+    onRetry?: () => void;
 };
 
 function ListBoundaryLoader({
@@ -30,11 +39,47 @@ function ListBoundaryLoader({
     isLoadingInitialReportActions = false,
     lastReportActionName = '',
     isLoadingNewerReportActions = false,
+    hasError = false,
+    onRetry,
 }: ListBoundaryLoaderProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
+    const {translate} = useLocalize();
+
+    // When retrying we want to show the loading state in the retry button so we
+    // have this separate state to handle that.
+    const [isRetrying, setIsRetrying] = React.useState(false);
+
+    const retry = () => {
+        setIsRetrying(true);
+        onRetry?.();
+    };
+
+    // Reset the retrying state once loading is done.
+    useEffect(() => {
+        if (isLoadingNewerReportActions || isLoadingOlderReportActions) {
+            return;
+        }
 
+        setIsRetrying(false);
+    }, [isLoadingNewerReportActions, isLoadingOlderReportActions]);
+
+    if (hasError || isRetrying) {
+        return (
+            <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.listBoundaryError]}>
+                <Text style={styles.listBoundaryErrorText}>{translate('listBoundary.errorMessage')}</Text>
+                {!isOffline && (
+                    <Button
+                        small
+                        onPress={retry}
+                        text={translate('listBoundary.tryAgain')}
+                        isLoading={isRetrying}
+                    />
+                )}
+            </View>
+        );
+    }
     // We use two different loading components for the header and footer
     // to reduce the jumping effect when the user is scrolling to the newer report actions
     if (type === CONST.LIST_COMPONENTS.FOOTER) {
@@ -55,7 +100,7 @@ function ListBoundaryLoader({
         // applied for a header of the list, i.e. when you scroll to the bottom of the list
         // the styles for android and the rest components are different that's why we use two different components
         return (
-            <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.chatBottomLoader]}>
+            <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.listBoundaryLoader]}>
                 <ActivityIndicator
                     color={theme.spinner}
                     size="small"
diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx
index 3c6038697c67..880a89da1b89 100644
--- a/src/pages/home/report/ReportActionsList.tsx
+++ b/src/pages/home/report/ReportActionsList.tsx
@@ -65,9 +65,15 @@ type ReportActionsListProps = WithCurrentUserPersonalDetailsProps & {
     /** Are we loading more report actions? */
     isLoadingOlderReportActions?: boolean;
 
+    /** Was there an error when loading older report actions? */
+    hasLoadingOlderReportActionsError?: boolean;
+
     /** Are we loading newer report actions? */
     isLoadingNewerReportActions?: boolean;
 
+    /** Was there an error when loading newer report actions? */
+    hasLoadingNewerReportActionsError?: boolean;
+
     /** Callback executed on list layout */
     onLayout: (event: LayoutChangeEvent) => void;
 
@@ -75,10 +81,10 @@ type ReportActionsListProps = WithCurrentUserPersonalDetailsProps & {
     onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 
     /** Function to load more chats */
-    loadOlderChats: () => void;
+    loadOlderChats: (force?: boolean) => void;
 
     /** Function to load newer chats */
-    loadNewerChats: () => void;
+    loadNewerChats: (force?: boolean) => void;
 
     /** Whether the composer is in full size */
     isComposerFullSize?: boolean;
@@ -139,7 +145,9 @@ function ReportActionsList({
     parentReportAction,
     isLoadingInitialReportActions = false,
     isLoadingOlderReportActions = false,
+    hasLoadingOlderReportActionsError = false,
     isLoadingNewerReportActions = false,
+    hasLoadingNewerReportActionsError = false,
     sortedReportActions,
     onScroll,
     mostRecentIOUReportActionID = '',
@@ -569,7 +577,11 @@ function ReportActionsList({
 
     const lastReportAction: OnyxTypes.ReportAction | EmptyObject = useMemo(() => sortedReportActions.at(-1) ?? {}, [sortedReportActions]);
 
-    const listFooterComponent = useCallback(() => {
+    const retryLoadOlderChatsError = useCallback(() => {
+        loadOlderChats(true);
+    }, [loadOlderChats]);
+
+    const listFooterComponent = useMemo(() => {
         // Skip this hook on the first render (when online), as we are not sure if more actions are going to be loaded,
         // Therefore showing the skeleton on footer might be misleading.
         // When offline, there should be no second render, so we should show the skeleton if the corresponding loading prop is present
@@ -584,9 +596,11 @@ function ReportActionsList({
                 isLoadingOlderReportActions={isLoadingOlderReportActions}
                 isLoadingInitialReportActions={isLoadingInitialReportActions}
                 lastReportActionName={lastReportAction.actionName}
+                hasError={hasLoadingOlderReportActionsError}
+                onRetry={retryLoadOlderChatsError}
             />
         );
-    }, [isLoadingInitialReportActions, isLoadingOlderReportActions, lastReportAction.actionName, isOffline]);
+    }, [isLoadingInitialReportActions, isLoadingOlderReportActions, lastReportAction.actionName, isOffline, hasLoadingOlderReportActionsError, retryLoadOlderChatsError]);
 
     const onLayoutInner = useCallback(
         (event: LayoutChangeEvent) => {
@@ -601,7 +615,11 @@ function ReportActionsList({
         [onContentSizeChange],
     );
 
-    const listHeaderComponent = useCallback(() => {
+    const retryLoadNewerChatsError = useCallback(() => {
+        loadNewerChats(true);
+    }, [loadNewerChats]);
+
+    const listHeaderComponent = useMemo(() => {
         if (!canShowHeader) {
             hasHeaderRendered.current = true;
             return null;
@@ -611,9 +629,19 @@ function ReportActionsList({
             <ListBoundaryLoader
                 type={CONST.LIST_COMPONENTS.HEADER}
                 isLoadingNewerReportActions={isLoadingNewerReportActions}
+                hasError={hasLoadingNewerReportActionsError}
+                onRetry={retryLoadNewerChatsError}
             />
         );
-    }, [isLoadingNewerReportActions, canShowHeader]);
+    }, [isLoadingNewerReportActions, canShowHeader, hasLoadingNewerReportActionsError, retryLoadNewerChatsError]);
+
+    const onStartReached = useCallback(() => {
+        loadNewerChats(false);
+    }, [loadNewerChats]);
+
+    const onEndReached = useCallback(() => {
+        loadOlderChats(false);
+    }, [loadOlderChats]);
 
     // 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.
@@ -635,9 +663,9 @@ function ReportActionsList({
                     contentContainerStyle={contentContainerStyle}
                     keyExtractor={keyExtractor}
                     initialNumToRender={initialNumToRender}
-                    onEndReached={loadOlderChats}
+                    onEndReached={onEndReached}
                     onEndReachedThreshold={0.75}
-                    onStartReached={loadNewerChats}
+                    onStartReached={onStartReached}
                     onStartReachedThreshold={0.75}
                     ListFooterComponent={listFooterComponent}
                     ListHeaderComponent={listHeaderComponent}
diff --git a/src/pages/home/report/ReportActionsView.tsx b/src/pages/home/report/ReportActionsView.tsx
index 3552ac16b236..a18ab6cd4c52 100755
--- a/src/pages/home/report/ReportActionsView.tsx
+++ b/src/pages/home/report/ReportActionsView.tsx
@@ -62,9 +62,15 @@ type ReportActionsViewProps = ReportActionsViewOnyxProps & {
     /** The report actions are loading more data */
     isLoadingOlderReportActions?: boolean;
 
+    /** There an error when loading older report actions */
+    hasLoadingOlderReportActionsError?: boolean;
+
     /** The report actions are loading newer data */
     isLoadingNewerReportActions?: boolean;
 
+    /** There an error when loading newer report actions */
+    hasLoadingNewerReportActionsError?: boolean;
+
     /** Whether the report is ready for comment linking */
     isReadyForCommentLinking?: boolean;
 
@@ -87,7 +93,9 @@ function ReportActionsView({
     transactionThreadReportActions = [],
     isLoadingInitialReportActions = false,
     isLoadingOlderReportActions = false,
+    hasLoadingOlderReportActionsError = false,
     isLoadingNewerReportActions = false,
+    hasLoadingNewerReportActionsError = false,
     isReadyForCommentLinking = false,
 }: ReportActionsViewProps) {
     useCopySelectionHelper();
@@ -95,6 +103,8 @@ function ReportActionsView({
     const route = useRoute<RouteProp<CentralPaneNavigatorParamList, typeof SCREENS.REPORT>>();
     const reportActionID = route?.params?.reportActionID;
     const didLayout = useRef(false);
+    const didLoadOlderChats = useRef(false);
+    const didLoadNewerChats = useRef(false);
 
     // triggerListID is used when navigating to a chat with messages loaded from LHN. Typically, these include thread actions, task actions, etc. Since these messages aren't the latest,we don't maintain their position and instead trigger a recalculation of their positioning in the list.
     // we don't set currentReportActionID on initial render as linkedID as it should trigger visibleReportActions after linked message was positioned
@@ -281,85 +291,118 @@ function ReportActionsView({
      * 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(() => {
-        Log.info(
-            `[ReportActionsView] loadOlderChats ${JSON.stringify({
-                isOffline: network.isOffline,
-                isLoadingOlderReportActions,
-                isLoadingInitialReportActions,
-                oldestReportActionID: oldestReportAction?.reportActionID,
-                hasCreatedAction,
-                isTransactionThread: !isEmptyObject(transactionThreadReport),
-            })}`,
-        );
+    const loadOlderChats = useCallback(
+        (force = false) => {
+            Log.info(
+                `[ReportActionsView] loadOlderChats ${JSON.stringify({
+                    isOffline: network.isOffline,
+                    isLoadingOlderReportActions,
+                    isLoadingInitialReportActions,
+                    oldestReportActionID: oldestReportAction?.reportActionID,
+                    hasCreatedAction,
+                    isTransactionThread: !isEmptyObject(transactionThreadReport),
+                })}`,
+            );
+
+            // Only fetch more if we are neither already fetching (so that we don't initiate duplicate requests) nor offline.
+            if (
+                !force &&
+                (!!network.isOffline ||
+                    isLoadingOlderReportActions ||
+                    // If there was an error only try again once on initial mount.
+                    (didLoadOlderChats.current && hasLoadingOlderReportActionsError) ||
+                    isLoadingInitialReportActions)
+            ) {
+                return;
+            }
 
-        // Only fetch more if we are neither already fetching (so that we don't initiate duplicate requests) nor offline.
-        if (!!network.isOffline || isLoadingOlderReportActions || isLoadingInitialReportActions) {
-            return;
-        }
+            // Don't load more chats if we're already at the beginning of the chat history
+            if (!oldestReportAction || hasCreatedAction) {
+                return;
+            }
 
-        // Don't load more chats if we're already at the beginning of the chat history
-        if (!oldestReportAction || hasCreatedAction) {
-            return;
-        }
+            didLoadOlderChats.current = true;
 
-        if (!isEmptyObject(transactionThreadReport)) {
-            // Get newer actions based on the newest reportAction for the current report
-            const oldestActionCurrentReport = reportActionIDMap.findLast((item) => item.reportID === reportID);
-            Report.getNewerActions(oldestActionCurrentReport?.reportID ?? '0', oldestActionCurrentReport?.reportActionID ?? '0');
+            if (!isEmptyObject(transactionThreadReport)) {
+                // Get newer actions based on the newest reportAction for the current report
+                const oldestActionCurrentReport = reportActionIDMap.findLast((item) => item.reportID === reportID);
+                Report.getNewerActions(oldestActionCurrentReport?.reportID ?? '0', oldestActionCurrentReport?.reportActionID ?? '0');
 
-            // Get newer actions based on the newest reportAction for the transaction thread report
-            const oldestActionTransactionThreadReport = reportActionIDMap.findLast((item) => item.reportID === transactionThreadReport.reportID);
-            Report.getNewerActions(oldestActionTransactionThreadReport?.reportID ?? '0', oldestActionTransactionThreadReport?.reportActionID ?? '0');
-        } else {
-            // Retrieve the next REPORT.ACTIONS.LIMIT sized page of comments
-            Report.getOlderActions(reportID, oldestReportAction.reportActionID);
-        }
-    }, [network.isOffline, isLoadingOlderReportActions, isLoadingInitialReportActions, oldestReportAction, hasCreatedAction, reportID, reportActionIDMap, transactionThreadReport]);
-
-    const loadNewerChats = useCallback(() => {
-        // Determines if loading older reports is necessary when the content is smaller than the list
-        // and there are fewer than 23 items, indicating we've reached the oldest message.
-        const isLoadingOlderReportsFirstNeeded = checkIfContentSmallerThanList() && reportActions.length > 23;
-
-        Log.info(
-            `[ReportActionsView] loadNewerChats ${JSON.stringify({
-                isOffline: network.isOffline,
-                isLoadingOlderReportActions,
-                isLoadingInitialReportActions,
-                newestReportAction: newestReportAction.pendingAction,
-                firstReportActionID: newestReportAction?.reportActionID,
-                isLoadingOlderReportsFirstNeeded,
-                reportActionID,
-            })}`,
-        );
+                // Get newer actions based on the newest reportAction for the transaction thread report
+                const oldestActionTransactionThreadReport = reportActionIDMap.findLast((item) => item.reportID === transactionThreadReport.reportID);
+                Report.getNewerActions(oldestActionTransactionThreadReport?.reportID ?? '0', oldestActionTransactionThreadReport?.reportActionID ?? '0');
+            } else {
+                // Retrieve the next REPORT.ACTIONS.LIMIT sized page of comments
+                Report.getOlderActions(reportID, oldestReportAction.reportActionID);
+            }
+        },
+        [
+            network.isOffline,
+            isLoadingOlderReportActions,
+            isLoadingInitialReportActions,
+            oldestReportAction,
+            hasCreatedAction,
+            reportID,
+            reportActionIDMap,
+            transactionThreadReport,
+            hasLoadingOlderReportActionsError,
+        ],
+    );
 
-        if (
-            !reportActionID ||
-            !isFocused ||
-            isLoadingInitialReportActions ||
-            isLoadingOlderReportActions ||
-            network.isOffline ||
-            newestReportAction.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE
-        ) {
-            return;
-        }
+    const loadNewerChats = useCallback(
+        (force = false) => {
+            // Determines if loading older reports is necessary when the content is smaller than the list
+            // and there are fewer than 23 items, indicating we've reached the oldest message.
+            const isLoadingOlderReportsFirstNeeded = checkIfContentSmallerThanList() && reportActions.length > 23;
+
+            Log.info(
+                `[ReportActionsView] loadNewerChats ${JSON.stringify({
+                    isOffline: network.isOffline,
+                    isLoadingNewerReportActions,
+                    isLoadingInitialReportActions,
+                    newestReportAction: newestReportAction.pendingAction,
+                    firstReportActionID: newestReportAction?.reportActionID,
+                    isLoadingOlderReportsFirstNeeded,
+                    reportActionID,
+                })}`,
+            );
+
+            if (
+                !force &&
+                (!reportActionID ||
+                    !isFocused ||
+                    isLoadingInitialReportActions ||
+                    isLoadingNewerReportActions ||
+                    // If there was an error only try again once on initial mount. We should also still load
+                    // more in case we have cached messages.
+                    (!hasMoreCached && didLoadNewerChats.current && hasLoadingNewerReportActionsError) ||
+                    network.isOffline ||
+                    newestReportAction.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE)
+            ) {
+                return;
+            }
 
-        if ((reportActionID && indexOfLinkedAction > -1 && !isLoadingOlderReportsFirstNeeded) || (!reportActionID && !isLoadingOlderReportsFirstNeeded)) {
-            handleReportActionPagination({firstReportActionID: newestReportAction?.reportActionID});
-        }
-    }, [
-        isLoadingInitialReportActions,
-        isLoadingOlderReportActions,
-        checkIfContentSmallerThanList,
-        reportActionID,
-        indexOfLinkedAction,
-        handleReportActionPagination,
-        network.isOffline,
-        reportActions.length,
-        newestReportAction,
-        isFocused,
-    ]);
+            didLoadNewerChats.current = true;
+
+            if ((reportActionID && indexOfLinkedAction > -1 && !isLoadingOlderReportsFirstNeeded) || (!reportActionID && !isLoadingOlderReportsFirstNeeded)) {
+                handleReportActionPagination({firstReportActionID: newestReportAction?.reportActionID});
+            }
+        },
+        [
+            isLoadingInitialReportActions,
+            isLoadingNewerReportActions,
+            checkIfContentSmallerThanList,
+            reportActionID,
+            indexOfLinkedAction,
+            handleReportActionPagination,
+            network.isOffline,
+            reportActions.length,
+            newestReportAction,
+            isFocused,
+            hasLoadingNewerReportActionsError,
+            hasMoreCached,
+        ],
+    );
 
     /**
      * Runs when the FlatList finishes laying out
@@ -516,7 +559,9 @@ function ReportActionsView({
                 loadNewerChats={loadNewerChats}
                 isLoadingInitialReportActions={isLoadingInitialReportActions}
                 isLoadingOlderReportActions={isLoadingOlderReportActions}
+                hasLoadingOlderReportActionsError={hasLoadingOlderReportActionsError}
                 isLoadingNewerReportActions={isLoadingNewerReportActions}
+                hasLoadingNewerReportActionsError={hasLoadingNewerReportActionsError}
                 listID={listID}
                 onContentSizeChange={onContentSizeChange}
                 shouldEnableAutoScrollToTopThreshold={shouldEnableAutoScroll}
@@ -562,6 +607,14 @@ function arePropsEqual(oldProps: ReportActionsViewProps, newProps: ReportActions
         return false;
     }
 
+    if (oldProps.hasLoadingOlderReportActionsError !== newProps.hasLoadingOlderReportActionsError) {
+        return false;
+    }
+
+    if (oldProps.hasLoadingNewerReportActionsError !== newProps.hasLoadingNewerReportActionsError) {
+        return false;
+    }
+
     return lodashIsEqual(oldProps.report, newProps.report);
 }
 
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 3b4402252822..ec571bd671b6 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4480,7 +4480,7 @@ const styles = (theme: ThemeColors) =>
             top: -36,
         },
 
-        chatBottomLoader: {
+        listBoundaryLoader: {
             position: 'absolute',
             top: 0,
             bottom: 0,
@@ -4488,6 +4488,15 @@ const styles = (theme: ThemeColors) =>
             right: 0,
             height: CONST.CHAT_HEADER_LOADER_HEIGHT,
         },
+        listBoundaryError: {
+            paddingVertical: 15,
+            paddingHorizontal: 20,
+        },
+        listBoundaryErrorText: {
+            color: theme.textSupporting,
+            fontSize: variables.fontSizeLabel,
+            marginBottom: 10,
+        },
 
         videoContainer: {
             ...flex.flex1,
diff --git a/src/types/onyx/ReportMetadata.ts b/src/types/onyx/ReportMetadata.ts
index c6484705553c..1c6035853564 100644
--- a/src/types/onyx/ReportMetadata.ts
+++ b/src/types/onyx/ReportMetadata.ts
@@ -2,9 +2,15 @@ type ReportMetadata = {
     /** Are we loading newer report actions? */
     isLoadingNewerReportActions?: boolean;
 
+    /** Was there an error when loading newer report actions? */
+    hasLoadingNewerReportActionsError?: boolean;
+
     /** Are we loading older report actions? */
     isLoadingOlderReportActions?: boolean;
 
+    /** Was there an error when loading older report actions? */
+    hasLoadingOlderReportActionsError?: boolean;
+
     /** Flag to check if the report actions data are loading */
     isLoadingInitialReportActions?: boolean;
 

From 47be44a93385c9313b6952d0541b52ba13b06a77 Mon Sep 17 00:00:00 2001
From: Janic Duplessis <janicduplessis@gmail.com>
Date: Mon, 6 May 2024 18:47:25 -0400
Subject: [PATCH 2/3] Fix incorrect change

---
 src/libs/API/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts
index 5440561a8965..ba06ec1d6429 100644
--- a/src/libs/API/types.ts
+++ b/src/libs/API/types.ts
@@ -195,7 +195,7 @@ const WRITE_COMMANDS = {
     ACCEPT_JOIN_REQUEST: 'AcceptJoinRequest',
     DECLINE_JOIN_REQUEST: 'DeclineJoinRequest',
     CREATE_POLICY_TAX: 'CreatePolicyTax',
-    UPDATE_POLICY_CONNECTION_CONFIG: 'UpdatePolicyConnectionConfig',
+    UPDATE_POLICY_CONNECTION_CONFIG: 'UpdatePolicyConnectionConfiguration',
     REMOVE_POLICY_CONNECTION: 'RemovePolicyConnection',
     SET_POLICY_TAXES_ENABLED: 'SetPolicyTaxesEnabled',
     DELETE_POLICY_TAXES: 'DeletePolicyTaxes',

From 350c7e21c1c99cd3596801dbf9c53a05cb30813a Mon Sep 17 00:00:00 2001
From: Janic Duplessis <janicduplessis@gmail.com>
Date: Thu, 9 May 2024 11:43:57 -0400
Subject: [PATCH 3/3] Always render header / footer on error, address review
 comments

---
 src/pages/home/ReportScreen.tsx             | 2 ++
 src/pages/home/report/ReportActionsList.tsx | 8 +++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx
index f70e82365feb..645f508a322d 100644
--- a/src/pages/home/ReportScreen.tsx
+++ b/src/pages/home/ReportScreen.tsx
@@ -770,7 +770,9 @@ export default withCurrentReportID(
                 initialValue: {
                     isLoadingInitialReportActions: true,
                     isLoadingOlderReportActions: false,
+                    hasLoadingOlderReportActionsError: false,
                     isLoadingNewerReportActions: false,
+                    hasLoadingNewerReportActionsError: false,
                 },
             },
             isComposerFullSize: {
diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx
index fe37af77eca6..5ac9301de998 100644
--- a/src/pages/home/report/ReportActionsList.tsx
+++ b/src/pages/home/report/ReportActionsList.tsx
@@ -605,8 +605,9 @@ function ReportActionsList({
     const listFooterComponent = useMemo(() => {
         // Skip this hook on the first render (when online), as we are not sure if more actions are going to be loaded,
         // Therefore showing the skeleton on footer might be misleading.
-        // When offline, there should be no second render, so we should show the skeleton if the corresponding loading prop is present
-        if (!isOffline && !hasFooterRendered.current) {
+        // When offline, there should be no second render, so we should show the skeleton if the corresponding loading prop is present.
+        // In case of an error we want to display the footer no matter what.
+        if (!isOffline && !hasFooterRendered.current && !hasLoadingOlderReportActionsError) {
             hasFooterRendered.current = true;
             return null;
         }
@@ -641,7 +642,8 @@ function ReportActionsList({
     }, [loadNewerChats]);
 
     const listHeaderComponent = useMemo(() => {
-        if (!canShowHeader) {
+        // In case of an error we want to display the header no matter what.
+        if (!canShowHeader && !hasLoadingNewerReportActionsError) {
             hasHeaderRendered.current = true;
             return null;
         }