Merge pull request #30658 from paultsimura/fix/30503-report-skeleton

fix: Chat - Skeleton placeholder flickers when opening chat with IOU in offline mode
Expensify · Nov 7, 2023 · 4dc53c7 · 4dc53c7
2 parents 8c8ba52 + 7727150
commit 4dc53c7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
@@ -365,9 +365,10 @@ function ReportActionsList({
     const lastReportAction = useMemo(() => _.last(sortedReportActions) || {}, [sortedReportActions]);
 
     const listFooterComponent = useCallback(() => {
-        // Skip this hook on the first render, as we are not sure if more actions are going to be loaded
-        // Therefore showing the skeleton on footer might be misleading
-        if (!hasFooterRendered.current) {
+        // 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) {
             hasFooterRendered.current = true;
             return null;
         }
@@ -380,7 +381,7 @@ function ReportActionsList({
                 lastReportActionName={lastReportAction.actionName}
             />
         );
-    }, [isLoadingInitialReportActions, isLoadingOlderReportActions, lastReportAction.actionName]);
+    }, [isLoadingInitialReportActions, isLoadingOlderReportActions, lastReportAction.actionName, isOffline]);
 
     const onLayoutInner = useCallback(
         (event) => {
@@ -390,17 +391,18 @@ function ReportActionsList({
     );
 
     const listHeaderComponent = useCallback(() => {
-        if (!hasHeaderRendered.current) {
+        if (!isOffline && !hasHeaderRendered.current) {
             hasHeaderRendered.current = true;
             return null;
         }
+
         return (
             <ListBoundaryLoader
                 type={CONST.LIST_COMPONENTS.HEADER}
                 isLoadingNewerReportActions={isLoadingNewerReportActions}
             />
         );
-    }, [isLoadingNewerReportActions]);
+    }, [isLoadingNewerReportActions, isOffline]);
 
     return (
         <>

diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
@@ -177,8 +177,8 @@ function ReportActionsView(props) {
      * displaying.
      */
     const loadOlderChats = () => {
-        // Only fetch more if we are not already fetching so that we don't initiate duplicate requests.
-        if (props.isLoadingOlderReportActions) {
+        // Only fetch more if we are neither already fetching (so that we don't initiate duplicate requests) nor offline.
+        if (props.network.isOffline || props.isLoadingOlderReportActions) {
             return;
         }