From 0f045e1d03e0efed6f0a7b5bc830626c879bbb4a Mon Sep 17 00:00:00 2001 From: Pavlo Tsimura Date: Mon, 8 Jan 2024 22:13:28 +0100 Subject: [PATCH 1/2] Use the full-height ReportActionsSkeletonView in all cases --- .../ListBoundaryLoader/ListBoundaryLoader.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js b/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js index 77bcc7bdd38e..e3043ae149be 100644 --- a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js +++ b/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js @@ -39,17 +39,20 @@ function ListBoundaryLoader({type, isLoadingOlderReportActions, isLoadingInitial // 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) { + // We are actively fetching older report actions from the server – need to show the skeleton view if (isLoadingOlderReportActions) { return ; } - // Make sure the report chat is not loaded till the beginning. This is so we do not show the - // skeleton view above the "created" action in a newly generated optimistic chat or one with not - // that many comments. - // Also, if we are offline and the report is not yet loaded till the beginning, we assume there are more actions to load, - // therefore show the skeleton view, even though the actions are not loading. - if (lastReportActionName !== CONST.REPORT.ACTIONS.TYPE.CREATED && (isLoadingInitialReportActions || isOffline)) { - return ; + /* + Ensure that the report chat is not loaded until the beginning. + This is to avoid displaying the skeleton view above the "created" action in a newly generated optimistic chat or one with not that many comments. + Additionally, if we are offline and the report is not loaded until the beginning, we assume there are more actions to load; + Therefore, show the skeleton view even though the actions are not actually loading. + */ + const isReportLoadedUntilBeginning = lastReportActionName === CONST.REPORT.ACTIONS.TYPE.CREATED; + if (!isReportLoadedUntilBeginning && (isLoadingInitialReportActions || isOffline)) { + return ; } } if (type === CONST.LIST_COMPONENTS.HEADER && isLoadingNewerReportActions) { From b868094948831cbfb3f45a150001b682b75415f4 Mon Sep 17 00:00:00 2001 From: Pavlo Tsimura Date: Tue, 9 Jan 2024 17:24:09 +0100 Subject: [PATCH 2/2] Use single return for Skeleton views --- .../home/report/ListBoundaryLoader/ListBoundaryLoader.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js b/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js index e3043ae149be..e059c2f06019 100644 --- a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js +++ b/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js @@ -39,11 +39,6 @@ function ListBoundaryLoader({type, isLoadingOlderReportActions, isLoadingInitial // 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) { - // We are actively fetching older report actions from the server – need to show the skeleton view - if (isLoadingOlderReportActions) { - return ; - } - /* Ensure that the report chat is not loaded until the beginning. This is to avoid displaying the skeleton view above the "created" action in a newly generated optimistic chat or one with not that many comments. @@ -51,7 +46,9 @@ function ListBoundaryLoader({type, isLoadingOlderReportActions, isLoadingInitial Therefore, show the skeleton view even though the actions are not actually loading. */ const isReportLoadedUntilBeginning = lastReportActionName === CONST.REPORT.ACTIONS.TYPE.CREATED; - if (!isReportLoadedUntilBeginning && (isLoadingInitialReportActions || isOffline)) { + const mayLoadMoreActions = !isReportLoadedUntilBeginning && (isLoadingInitialReportActions || isOffline); + + if (isLoadingOlderReportActions || mayLoadMoreActions) { return ; } }