From 1adc33900744acdb8237169b6557944b965dfaf2 Mon Sep 17 00:00:00 2001 From: Adam Horodyski Date: Thu, 3 Apr 2025 16:39:01 +0200 Subject: [PATCH 1/3] fix: keep the skeleton open for single expense reports only when fetching --- src/pages/home/report/ReportActionsView.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportActionsView.tsx b/src/pages/home/report/ReportActionsView.tsx index ca337a8e4546..f6b57a7bc21d 100755 --- a/src/pages/home/report/ReportActionsView.tsx +++ b/src/pages/home/report/ReportActionsView.tsx @@ -85,6 +85,8 @@ function ReportActionsView({ const prevTransactionThreadReport = usePrevious(transactionThreadReport); const reportActionID = route?.params?.reportActionID; const prevReportActionID = usePrevious(reportActionID); + const reportPreviewAction = useMemo(() => getReportPreviewAction(report.chatReportID, report.reportID), [report.chatReportID, report.reportID]); + const isSingleExpenseReport = reportPreviewAction?.childMoneyRequestCount === 1; const didLayout = useRef(false); const {isOffline} = useNetwork(); @@ -136,7 +138,6 @@ function ReportActionsView({ actions.push(optimisticCreatedAction); } - const reportPreviewAction = getReportPreviewAction(report.chatReportID, report.reportID); const moneyRequestActions = allReportActions.filter((action) => { const originalMessage = isMoneyRequestAction(action) ? getOriginalMessage(action) : undefined; return ( @@ -171,7 +172,7 @@ function ReportActionsView({ } return [...actions, createdAction]; - }, [allReportActions, report, transactionThreadReport]); + }, [allReportActions, report, transactionThreadReport, reportPreviewAction]); // Get a sorted array of reportActions for both the current report and the transaction thread report associated with this report (if there is one) // so that we display transaction-level and report-level report actions in order in the one-transaction view @@ -271,7 +272,7 @@ function ReportActionsView({ }; }, [isTheFirstReportActionIsLinked]); - if ((isLoadingInitialReportActions && !isOffline) ?? isLoadingApp) { + if ((isLoadingInitialReportActions && (isSingleExpenseReport || visibleReportActions.length === 0) && !isOffline) ?? isLoadingApp) { return ; } From 50fca607a6fe76871e581a5c6547909d291a02fc Mon Sep 17 00:00:00 2001 From: Adam Horodyski Date: Mon, 7 Apr 2025 13:36:35 +0200 Subject: [PATCH 2/3] fix: limit forced skeletons to only single expense reports with missing data --- src/pages/home/report/ReportActionsView.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportActionsView.tsx b/src/pages/home/report/ReportActionsView.tsx index f6b57a7bc21d..2927f92b8dc2 100755 --- a/src/pages/home/report/ReportActionsView.tsx +++ b/src/pages/home/report/ReportActionsView.tsx @@ -86,7 +86,6 @@ function ReportActionsView({ const reportActionID = route?.params?.reportActionID; const prevReportActionID = usePrevious(reportActionID); const reportPreviewAction = useMemo(() => getReportPreviewAction(report.chatReportID, report.reportID), [report.chatReportID, report.reportID]); - const isSingleExpenseReport = reportPreviewAction?.childMoneyRequestCount === 1; const didLayout = useRef(false); const {isOffline} = useNetwork(); @@ -207,6 +206,11 @@ function ReportActionsView({ actionCreated && lastVisibleActionCreated ? actionCreated >= lastVisibleActionCreated : actionCreated === lastVisibleActionCreated; const hasNewestReportAction = isNewestAction(lastActionCreated, report.lastVisibleActionCreated) || isNewestAction(lastActionCreated, transactionThreadReport?.lastVisibleActionCreated); + const isSingleExpenseReport = reportPreviewAction?.childMoneyRequestCount === 1; + const isMissingTransactionThreadReportID = !transactionThreadReport?.reportID; + const isReportDataIncomplete = isSingleExpenseReport && isMissingTransactionThreadReportID; + const isMissingReportActions = visibleReportActions.length === 0; + useEffect(() => { // update ref with current state prevShouldUseNarrowLayoutRef.current = shouldUseNarrowLayout; @@ -272,11 +276,11 @@ function ReportActionsView({ }; }, [isTheFirstReportActionIsLinked]); - if ((isLoadingInitialReportActions && (isSingleExpenseReport || visibleReportActions.length === 0) && !isOffline) ?? isLoadingApp) { + if ((isLoadingInitialReportActions && (isReportDataIncomplete || isMissingReportActions) && !isOffline) ?? isLoadingApp) { return ; } - if (visibleReportActions.length === 0) { + if (isMissingReportActions) { return ; } From 5180b187e91d43dbc9bf3d76baa0cdc427e1f4c0 Mon Sep 17 00:00:00 2001 From: Adam Horodyski Date: Mon, 7 Apr 2025 18:26:43 +0200 Subject: [PATCH 3/3] fix: force the skeleton on all single expense reports when fetching --- src/pages/home/report/ReportActionsView.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionsView.tsx b/src/pages/home/report/ReportActionsView.tsx index 2927f92b8dc2..3791cd5bdd5a 100755 --- a/src/pages/home/report/ReportActionsView.tsx +++ b/src/pages/home/report/ReportActionsView.tsx @@ -207,8 +207,7 @@ function ReportActionsView({ const hasNewestReportAction = isNewestAction(lastActionCreated, report.lastVisibleActionCreated) || isNewestAction(lastActionCreated, transactionThreadReport?.lastVisibleActionCreated); const isSingleExpenseReport = reportPreviewAction?.childMoneyRequestCount === 1; - const isMissingTransactionThreadReportID = !transactionThreadReport?.reportID; - const isReportDataIncomplete = isSingleExpenseReport && isMissingTransactionThreadReportID; + const isReportDataIncomplete = isSingleExpenseReport; const isMissingReportActions = visibleReportActions.length === 0; useEffect(() => {