From 0bda3e416a3c51c788991ba9557495d22212dd37 Mon Sep 17 00:00:00 2001
From: Tomasz Lesniakiewicz <tlesniakiewicz@gmail.com>
Date: Wed, 26 Jun 2024 17:29:54 +0200
Subject: [PATCH] fix: remove flickering effect when loading one-expense
 reports

---
 src/libs/ReportActionsUtils.ts              | 27 +++++++++++++++------
 src/pages/home/report/ReportActionItem.tsx  |  2 +-
 src/pages/home/report/ReportActionsView.tsx |  2 +-
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
index a12e9ce61a63..b843272e8bcf 100644
--- a/src/libs/ReportActionsUtils.ts
+++ b/src/libs/ReportActionsUtils.ts
@@ -308,6 +308,22 @@ function shouldIgnoreGap(currentReportAction: ReportAction | undefined, nextRepo
     );
 }
 
+/**
+ * Returns filtered list for one transaction view
+ * Separated it from getCombinedReportActions, so it can be reused
+ */
+function getFilteredForOneTransactionView(reportActions: ReportAction[], isSelfDM = false): ReportAction[] {
+    const filteredReportActions = reportActions.filter((action) => {
+        const actionType = (action as OriginalMessageIOU).originalMessage?.type ?? '';
+        if (isSelfDM) {
+            return actionType !== CONST.IOU.REPORT_ACTION_TYPE.CREATE && !isSentMoneyReportAction(action);
+        }
+        return actionType !== CONST.IOU.REPORT_ACTION_TYPE.CREATE && actionType !== CONST.IOU.REPORT_ACTION_TYPE.TRACK && !isSentMoneyReportAction(action);
+    });
+
+    return filteredReportActions;
+}
+
 /**
  * Returns a sorted and filtered list of report actions from a report and it's associated child
  * transaction thread report in order to correctly display reportActions from both reports in the one-transaction report view.
@@ -322,14 +338,7 @@ function getCombinedReportActions(reportActions: ReportAction[], transactionThre
 
     const report = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`];
     const isSelfDM = report?.chatType === CONST.REPORT.CHAT_TYPE.SELF_DM;
-    // Filter out request and send money request actions because we don't want to show any preview actions for one transaction reports
-    const filteredReportActions = [...reportActions, ...filteredTransactionThreadReportActions].filter((action) => {
-        const actionType = (action as OriginalMessageIOU).originalMessage?.type ?? '';
-        if (isSelfDM) {
-            return actionType !== CONST.IOU.REPORT_ACTION_TYPE.CREATE && !isSentMoneyReportAction(action);
-        }
-        return actionType !== CONST.IOU.REPORT_ACTION_TYPE.CREATE && actionType !== CONST.IOU.REPORT_ACTION_TYPE.TRACK && !isSentMoneyReportAction(action);
-    });
+    const filteredReportActions = getFilteredForOneTransactionView([...reportActions, ...filteredTransactionThreadReportActions], isSelfDM);
 
     return getSortedReportActions(filteredReportActions, true);
 }
@@ -877,6 +886,7 @@ function isTaskAction(reportAction: OnyxEntry<ReportAction>): boolean {
     );
 }
 
+//maybe that?
 /**
  * Gets the reportID for the transaction thread associated with a report by iterating over the reportActions and identifying the IOU report actions.
  * Returns a reportID if there is exactly one transaction thread for the report, and null otherwise.
@@ -1322,6 +1332,7 @@ export {
     wasActionTakenByCurrentUser,
     isResolvedActionTrackExpense,
     isTripPreview,
+    getFilteredForOneTransactionView,
 };
 
 export type {LastVisibleMessage};
diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx
index 3bcdc1033b24..d722959deef9 100644
--- a/src/pages/home/report/ReportActionItem.tsx
+++ b/src/pages/home/report/ReportActionItem.tsx
@@ -882,7 +882,7 @@ function ReportActionItem({
                 <OfflineWithFeedback pendingAction={action.pendingAction}>
                     {transactionThreadReport && !isEmptyObject(transactionThreadReport) ? (
                         <>
-                            {transactionCurrency !== report.currency && (
+                            {!!transaction && transactionCurrency !== report.currency && (
                                 <>
                                     <MoneyReportView
                                         report={report}
diff --git a/src/pages/home/report/ReportActionsView.tsx b/src/pages/home/report/ReportActionsView.tsx
index b98e878743be..ad1b4838d98f 100755
--- a/src/pages/home/report/ReportActionsView.tsx
+++ b/src/pages/home/report/ReportActionsView.tsx
@@ -516,7 +516,7 @@ function ReportActionsView({
             createdAction.pendingAction = CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE;
         }
 
-        return [...actions, createdAction];
+        return moneyRequestActions.length === 1 ? ReportActionsUtils.getFilteredForOneTransactionView([...actions, createdAction]) : [...actions, createdAction];
     }, [reportActions, report, transactionThreadReport]);
 
     // Comments have not loaded at all yet do nothing