Merge pull request #62562 from callstack-internal/fix-blinking-old-type-of-report

[CP Staging] Fix blinking old type of report

Author: mountiny

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

@@ -75,13 +75,16 @@ type MoneyRequestReportListProps = {
     reportActions?: OnyxTypes.ReportAction[];
 
     /** List of transactions belonging to this report */
-    transactions: OnyxTypes.Transaction[];
+    transactions?: OnyxTypes.Transaction[];
 
     /** If the report has newer actions to load */
     hasNewerActions: boolean;
 
     /** If the report has older actions to load */
     hasOlderActions: boolean;
+
+    /** Whether report actions are still loading */
+    isLoadingInitialReportActions?: boolean;
 };
 
 function getParentReportAction(parentReportActions: OnyxEntry<OnyxTypes.ReportActions>, parentReportActionID: string | undefined): OnyxEntry<OnyxTypes.ReportAction> {
@@ -91,7 +94,15 @@ function getParentReportAction(parentReportActions: OnyxEntry<OnyxTypes.ReportAc
     return parentReportActions[parentReportActionID];
 }
 
-function MoneyRequestReportActionsList({report, policy, reportActions = [], transactions = [], hasNewerActions, hasOlderActions}: MoneyRequestReportListProps) {
+function MoneyRequestReportActionsList({
+    report,
+    policy,
+    reportActions = [],
+    transactions = [],
+    hasNewerActions,
+    hasOlderActions,
+    isLoadingInitialReportActions,
+}: MoneyRequestReportListProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {preferredLocale} = useLocalize();
@@ -484,7 +495,7 @@ function MoneyRequestReportActionsList({report, policy, reportActions = [], tran
                     isActive={isFloatingMessageCounterVisible}
                     onClick={scrollToBottomAndMarkReportAsRead}
                 />
-                {isEmpty(visibleReportActions) && isEmpty(transactions) ? (
+                {isEmpty(visibleReportActions) && isEmpty(transactions) && !isLoadingInitialReportActions ? (
                     <>
                         <MoneyRequestViewReportFields
                             report={report}

src/components/MoneyRequestReportView/MoneyRequestReportView.tsx

@@ -100,7 +100,7 @@ function MoneyRequestReportView({report, policy, reportMetadata, shouldDisplayRe
 
     const transactionThreadReportID = getOneTransactionThreadReportID(reportID, reportActions ?? [], isOffline);
 
-    const [transactions = undefined] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, {
+    const [transactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, {
         selector: (allTransactions: OnyxCollection<OnyxTypes.Transaction>) => selectAllTransactionsForReport(allTransactions, reportID, reportActions),
         canBeMissing: true,
     });
@@ -123,8 +123,14 @@ function MoneyRequestReportView({report, policy, reportMetadata, shouldDisplayRe
     // If true we will use standard `ReportActionsView` to display report data and a special header, anything else is handled via `MoneyRequestReportActionsList`
     const isTransactionThreadView = isReportTransactionThread(report);
 
-    const isEmptyTransactionReport = transactions && transactionThreadReportID === undefined && !isLoadingInitialReportActions;
-    const shouldDisplayMoneyRequestActionsList = !!isEmptyTransactionReport && shouldDisplayReportTableView(report, transactions);
+    // Prevent flash by ensuring transaction data is fully loaded before deciding which view to render
+    // We need to wait for both the selector to finish AND ensure we're not in a loading state where transactions could still populate
+    const isTransactionDataReady = transactions !== undefined;
+    const isStillLoadingData = !!isLoadingInitialReportActions || !!reportMetadata?.isLoadingOlderReportActions || !!reportMetadata?.isLoadingNewerReportActions;
+    const shouldWaitForData = (!isTransactionDataReady || (isStillLoadingData && transactions?.length === 0)) && !isTransactionThreadView;
+
+    const isEmptyTransactionReport = transactions && transactions.length === 0 && transactionThreadReportID === undefined;
+    const shouldDisplayMoneyRequestActionsList = !!isEmptyTransactionReport || shouldDisplayReportTableView(report, transactions ?? []);
 
     const reportHeaderView = useMemo(
         () =>
@@ -160,7 +166,7 @@ function MoneyRequestReportView({report, policy, reportMetadata, shouldDisplayRe
         [activeWorkspaceID, backToRoute, isTransactionThreadView, parentReportAction, policy, report, reportActions, transactionThreadReportID],
     );
 
-    if (!!(isLoadingInitialReportActions && reportActions.length === 0 && !isOffline) || !transactions) {
+    if (!!(isLoadingInitialReportActions && reportActions.length === 0 && !isOffline) || shouldWaitForData) {
         return <InitialLoadingSkeleton styles={styles} />;
     }
 
@@ -214,6 +220,7 @@ function MoneyRequestReportView({report, policy, reportMetadata, shouldDisplayRe
                             reportActions={reportActions}
                             hasOlderActions={hasOlderActions}
                             hasNewerActions={hasNewerActions}
+                            isLoadingInitialReportActions={isLoadingInitialReportActions}
                         />
                     ) : (
                         <ReportActionsView