Merge pull request #90709 from Expensify/claude-fixBulkEditPerformanceHang

Fix bulk expense edit performance hang on large reports

Author: Beamanator

src/libs/actions/IOU/BulkEdit.ts

@@ -12,8 +12,10 @@ import type {TransactionDetails} from '@libs/ReportUtils';
 import {
     buildOptimisticCreatedReportAction,
     buildOptimisticModifiedExpenseReportAction,
+    buildTransactionThread,
     canEditFieldOfMoneyRequest,
     findSelfDMReportID,
+    generateReportID,
     getOutstandingChildRequest,
     getParsedComment,
     getTransactionDetails,
@@ -24,7 +26,6 @@ import {
 } from '@libs/ReportUtils';
 import {calculateTaxAmount, getAmount, getClearedPendingFields, getCurrency, getTaxValue, getUpdatedTransaction, isOnHold, isSplitChildTransaction} from '@libs/TransactionUtils';
 import ViolationsUtils from '@libs/Violations/ViolationsUtils';
-import {createTransactionThreadReport} from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
@@ -79,9 +80,6 @@ type UpdateMultipleMoneyRequestsParams = {
     policyTags: OnyxCollection<OnyxTypes.PolicyTagLists>;
     hash?: number;
     allPolicies?: OnyxCollection<OnyxTypes.Policy>;
-    introSelected: OnyxEntry<OnyxTypes.IntroSelected>;
-    betas: OnyxEntry<OnyxTypes.Beta[]>;
-    currentUserLogin: string;
     currentUserAccountID: number;
     delegateAccountID: number | undefined;
 };
@@ -97,10 +95,7 @@ function updateMultipleMoneyRequests({
     policyTags,
     hash,
     allPolicies,
-    introSelected,
-    betas,
     currentUserAccountID,
-    currentUserLogin,
     delegateAccountID,
 }: UpdateMultipleMoneyRequestsParams) {
     // Track running totals per report so multiple edits in the same report compound correctly.
@@ -132,23 +127,20 @@ function updateMultipleMoneyRequests({
             }
         }
 
-        let transactionThreadReportID = transaction.transactionThreadReportID ?? reportAction?.childReportID;
+        let transactionThreadReportID = reportAction?.childReportID ?? transaction.transactionThreadReportID;
         let transactionThread = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`] ?? null;
 
         // Offline-created expenses can be missing a transaction thread until it's opened once.
-        // Ensure the thread exists before adding optimistic MODIFIED_EXPENSE actions so
+        // Ensure the thread exists locally before adding optimistic MODIFIED_EXPENSE actions so
         // bulk-edit comments are visible immediately while still offline.
+        // We intentionally avoid calling createTransactionThreadReport here because it fires
+        // an OpenReport API command per expense, which floods the queue and hangs the UI on
+        // large reports (40-50+ expenses). The backend already creates the transaction thread
+        // when processing UpdateMoneyRequest, so we only need local Onyx state.
         let didCreateThreadInThisIteration = false;
         if (!transactionThreadReportID && iouReport?.reportID) {
-            const optimisticTransactionThread = createTransactionThreadReport({
-                introSelected,
-                currentUserLogin,
-                currentUserAccountID,
-                betas,
-                iouReport,
-                iouReportAction: reportAction,
-                transaction,
-            });
+            const optimisticTransactionThreadReportID = generateReportID();
+            const optimisticTransactionThread = buildTransactionThread(reportAction, iouReport, currentUserAccountID, undefined, optimisticTransactionThreadReportID);
             if (optimisticTransactionThread?.reportID) {
                 transactionThreadReportID = optimisticTransactionThread.reportID;
                 transactionThread = optimisticTransactionThread;
@@ -296,6 +288,38 @@ function updateMultipleMoneyRequests({
         const snapshotSuccessData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.SNAPSHOT>> = [];
         const snapshotFailureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.SNAPSHOT>> = [];
 
+        // If we created the transaction thread optimistically above, seed it into Onyx
+        // so the MODIFIED_EXPENSE action has somewhere to land. On success the server's
+        // OpenReport data (triggered by UpdateMoneyRequest) will overwrite these values.
+        // Also link the thread back: set childReportID on the parent IOU action and
+        // transactionThreadReportID on the transaction so subsequent offline edits of the
+        // same expense reuse this thread instead of generating a new one each time.
+        if (didCreateThreadInThisIteration && transactionThread && transactionThreadReportID) {
+            optimisticData.push({
+                onyxMethod: Onyx.METHOD.SET,
+                key: `${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`,
+                value: transactionThread,
+            });
+            // Link childReportID on the parent IOU report action
+            if (reportAction?.reportActionID && iouReport?.reportID) {
+                optimisticData.push({
+                    onyxMethod: Onyx.METHOD.MERGE,
+                    key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${iouReport.reportID}`,
+                    value: {[reportAction.reportActionID]: {childReportID: transactionThreadReportID}},
+                });
+                failureData.push({
+                    onyxMethod: Onyx.METHOD.MERGE,
+                    key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${iouReport.reportID}`,
+                    value: {[reportAction.reportActionID]: {childReportID: null}},
+                });
+            }
+            failureData.push({
+                onyxMethod: Onyx.METHOD.SET,
+                key: `${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`,
+                value: null,
+            });
+        }
+
         // Pending fields for the transaction
         const pendingFields: OnyxTypes.Transaction['pendingFields'] = Object.fromEntries(Object.keys(transactionChanges).map((field) => [field, CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE]));
         const clearedPendingFields = getClearedPendingFields(transactionChanges);
@@ -357,6 +381,9 @@ function updateMultipleMoneyRequests({
                 pendingFields,
                 isLoading: false,
                 errorFields: null,
+                // Link the optimistic thread back to the transaction so subsequent
+                // offline edits reuse it instead of generating a new thread each time.
+                ...(didCreateThreadInThisIteration && transactionThreadReportID ? {transactionThreadReportID} : {}),
             },
         });
 
@@ -460,9 +487,8 @@ function updateMultipleMoneyRequests({
         if (transactionThreadReportID) {
             // Backfill a CREATED action for threads never opened locally so
             // MoneyRequestView renders and the skeleton doesn't loop offline.
-            // Skip when the thread was just created above (openReport handles it).
             const threadReportActions = reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transactionThreadReportID}`] ?? {};
-            const hasCreatedAction = didCreateThreadInThisIteration || Object.values(threadReportActions).some((action) => action?.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED);
+            const hasCreatedAction = Object.values(threadReportActions).some((action) => action?.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED);
             const optimisticCreatedValue: Record<string, Partial<OnyxTypes.ReportAction>> = {};
             if (!hasCreatedAction) {
                 const optimisticCreatedAction = buildOptimisticCreatedReportAction({emailCreatingAction: CONST.REPORT.OWNER_EMAIL_FAKE});
@@ -528,6 +554,9 @@ function updateMultipleMoneyRequests({
                 ...transaction,
                 pendingFields: clearedPendingFields,
                 errorFields,
+                // Clear the optimistically added transactionThreadReportID so it doesn't
+                // persist after a failed request — the server never created this thread.
+                ...(didCreateThreadInThisIteration && transactionThreadReportID ? {transactionThreadReportID: null} : {}),
             },
         });
 

src/pages/Search/SearchEditMultiple/SearchEditMultiplePage.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import Button from '@components/Button';
@@ -44,7 +44,7 @@ function SearchEditMultiplePage() {
     const {currentSearchHash} = useSearchQueryContext();
     const {currentSearchResults} = useSearchResultsContext();
     const {clearSelectedTransactions} = useSearchSelectionActions();
-    const {login: currentUserLogin, accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
+    const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
     const delegateAccountID = useDelegateAccountID();
     const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
     const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
@@ -54,8 +54,6 @@ function SearchEditMultiplePage() {
     const [allReportActions] = useOnyx(ONYXKEYS.COLLECTION.REPORT_ACTIONS);
     const [allPolicyTags] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS);
     const [allPolicyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES);
-    const [betas] = useOnyx(ONYXKEYS.BETAS);
-    const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
 
     const snapshotData = currentSearchResults?.data;
     const mergedTransactions = withSnapshotTransactions(allTransactions, snapshotData);
@@ -127,8 +125,10 @@ function SearchEditMultiplePage() {
         };
     }, []);
 
+    const [isSaving, setIsSaving] = useState(false);
+
     const save = () => {
-        if (!draftTransaction) {
+        if (!draftTransaction || isSaving) {
             return;
         }
 
@@ -166,29 +166,32 @@ function SearchEditMultiplePage() {
             return;
         }
 
-        updateMultipleMoneyRequests({
-            transactionIDs: selectedTransactionIDs,
-            changes,
-            policy,
-            reports: mergedReports,
-            transactions: mergedTransactions,
-            reportActions: mergedReportActions,
-            policyCategories: allPolicyCategories,
-            policyTags: allPolicyTags,
-            hash: currentSearchHash,
-            allPolicies: policies,
-            introSelected,
-            betas,
-            currentUserAccountID,
-            currentUserLogin: currentUserLogin ?? '',
-            delegateAccountID,
-        });
-        // Bulk edit can start from report (ID-based selection) or search (map-based selection),
-        // so clear both stores to keep deselection behavior consistent.
-        clearSelectedTransactions(true);
-        clearSelectedTransactions();
+        setIsSaving(true);
+
+        // Defer the bulk edit loop so the loading spinner has a chance to paint
+        // before the synchronous Onyx writes block the JS thread.
+        requestAnimationFrame(() => {
+            updateMultipleMoneyRequests({
+                transactionIDs: selectedTransactionIDs,
+                changes,
+                policy,
+                reports: mergedReports,
+                transactions: mergedTransactions,
+                reportActions: mergedReportActions,
+                policyCategories: allPolicyCategories,
+                policyTags: allPolicyTags,
+                hash: currentSearchHash,
+                allPolicies: policies,
+                currentUserAccountID,
+                delegateAccountID,
+            });
+            // Bulk edit can start from report (ID-based selection) or search (map-based selection),
+            // so clear both stores to keep deselection behavior consistent.
+            clearSelectedTransactions(true);
+            clearSelectedTransactions();
 
-        Navigation.dismissToPreviousRHP();
+            Navigation.dismissToPreviousRHP();
+        });
     };
 
     const currency = policy?.outputCurrency ?? CONST.CURRENCY.USD;
@@ -324,6 +327,8 @@ function SearchEditMultiplePage() {
                     large
                     text={translate('common.save')}
                     onPress={save}
+                    isLoading={isSaving}
+                    isDisabled={isSaving}
                     style={[styles.m5]}
                 />
             </View>