Merge pull request Expensify#89723 from Expensify/revert-88728-korytko/perf/fix-search-dismiss

[CP Staging] Revert "Fix: smooth post-submit navigation and rendering on Spend tab"

Author: mountiny

src/CONST/index.ts

@@ -7518,10 +7518,6 @@ const CONST = {
 
     DOWNLOADS_PATH: '/Downloads',
     DOWNLOADS_TIMEOUT: 5000,
-
-    // Max time (ms) to wait for a transaction thread report before falling back to renderable content.
-    SKELETON_LOADING_TIMEOUT_MS: 10000,
-
     NEW_EXPENSIFY_PATH: '/New Expensify',
     RECEIPTS_UPLOAD_PATH: '/Receipts-Upload',
 

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

@@ -26,7 +26,6 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import {isConsecutiveChronosAutomaticTimerAction} from '@libs/ChronosUtils';
 import DateUtils from '@libs/DateUtils';
-import {hasDeferredWrite} from '@libs/deferredLayoutWrite';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {getAllNonDeletedTransactions, isActionVisibleOnMoneyRequestReport} from '@libs/MoneyRequestReportUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -666,14 +665,6 @@ function MoneyRequestReportActionsList({onLayout}: MoneyRequestReportListProps)
         return numToRender || undefined;
     }, [styles.chatItem.paddingBottom, styles.chatItem.paddingTop, windowHeight, linkedReportActionID]);
 
-    const isReportEmpty = isEmpty(visibleReportActions) && isEmpty(transactions) && !showReportActionsLoadingState;
-    // hasDeferredWrite is non-reactive (reads a module-level Map, not tracked by React).
-    // This is intentional: we only check on the initial render after the RHP dismisses.
-    // Once the deferred write flushes and createTransaction runs, Onyx updates make
-    // transactions non-empty, which drives the transition away from the skeleton.
-    const isAwaitingDeferredTransaction = isReportEmpty && hasDeferredWrite(CONST.DEFERRED_LAYOUT_WRITE_KEYS.DISMISS_MODAL);
-    const showEmptyState = isReportEmpty && !isAwaitingDeferredTransaction;
-
     if (!report) {
         return null;
     }
@@ -694,12 +685,7 @@ function MoneyRequestReportActionsList({onLayout}: MoneyRequestReportListProps)
                     isActive={isFloatingMessageCounterVisible}
                     onClick={scrollToBottomAndMarkReportAsRead}
                 />
-                {/* Exactly one of these three branches is active at a time:
-                    1. isAwaitingDeferredTransaction — skeleton while dismiss-first creates the transaction
-                    2. showEmptyState — genuinely empty report
-                    3. !isReportEmpty — report has data, render the FlatList */}
-                {isAwaitingDeferredTransaction && <ReportActionsListLoadingSkeleton reasonAttributes={skeletonReasonAttributes} />}
-                {showEmptyState && (
+                {isEmpty(visibleReportActions) && isEmpty(transactions) && !showReportActionsLoadingState ? (
                     <ScrollView contentContainerStyle={styles.flexGrow1}>
                         <MoneyRequestViewReportFields
                             report={report}
@@ -711,8 +697,7 @@ function MoneyRequestReportActionsList({onLayout}: MoneyRequestReportListProps)
                             policy={policy}
                         />
                     </ScrollView>
-                )}
-                {!isReportEmpty && (
+                ) : (
                     <FlatListWithScrollKey
                         initialNumToRender={initialNumToRender}
                         accessibilityLabel={translate('sidebarScreen.listOfChatMessages')}

src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx

@@ -25,15 +25,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {close} from '@libs/actions/Modal';
 import Navigation from '@libs/Navigation/Navigation';
 import {buildFilterQueryWithSortDefaults, isAmountFilterKey} from '@libs/SearchQueryUtils';
-import {
-    FILTER_GROUP_MAP,
-    FILTER_LABEL_MAP,
-    filterValidHasValues,
-    getMultiSelectFilterOptions,
-    getSingleSelectFilterOptions,
-    mapFiltersFormToLabelValueList,
-    SKIPPED_SEARCH_FILTERS,
-} from '@libs/SearchUIUtils';
+import {FILTER_GROUP_MAP, FILTER_LABEL_MAP, filterValidHasValues, getMultiSelectFilterOptions, getSingleSelectFilterOptions, mapFiltersFormToLabelValueList} from '@libs/SearchUIUtils';
 import type {SearchFilter} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
@@ -61,6 +53,18 @@ type UseSearchFiltersBarResult = {
     translate: ReturnType<typeof useLocalize>['translate'];
 };
 
+const SKIPPED_FILTERS = new Set<SearchAdvancedFiltersKey>([
+    FILTER_KEYS.GROUP_BY,
+    FILTER_KEYS.GROUP_CURRENCY,
+    FILTER_KEYS.LIMIT,
+    FILTER_KEYS.TYPE,
+    FILTER_KEYS.VIEW,
+    FILTER_KEYS.PAYER,
+    FILTER_KEYS.ACTION,
+    FILTER_KEYS.COLUMNS,
+    FILTER_KEYS.KEYWORD,
+]);
+
 function getFilterSentryLabel(filterKey: SearchAdvancedFiltersKey | SearchFilterKey | ReportFieldKey) {
     return `Search-Filter-${filterKey}`;
 }
@@ -202,7 +206,7 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON): UseSearchFiltersBarRes
         });
     };
 
-    const filters = mapFiltersFormToLabelValueList<FilterItem>(searchAdvancedFiltersForm, queryJSON.policyID, SKIPPED_SEARCH_FILTERS, translate, localeCompare, (filterKey) => {
+    const filters = mapFiltersFormToLabelValueList<FilterItem>(searchAdvancedFiltersForm, queryJSON.policyID, SKIPPED_FILTERS, translate, localeCompare, (filterKey) => {
         const groupConfig = FILTER_GROUP_MAP[filterKey];
         if (groupConfig) {
             if (isAmountFilterKey(groupConfig.syntax)) {
@@ -426,4 +430,4 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON): UseSearchFiltersBarRes
 
 export default useSearchFiltersBar;
 export type {FilterItem};
-export {typeOptionsPoliciesSelector};
+export {typeOptionsPoliciesSelector, SKIPPED_FILTERS};

src/components/Search/index.tsx

@@ -56,7 +56,6 @@ import {
     isTransactionGroupListItemType,
     isTransactionListItemType,
     isTransactionReportGroupListItemType,
-    isTransactionSearchType,
     shouldShowEmptyState,
     shouldShowYear as shouldShowYearUtil,
 } from '@libs/SearchUIUtils';
@@ -84,6 +83,7 @@ import {useSearchActionsContext, useSearchStateContext} from './SearchContext';
 import SearchList from './SearchList';
 import type {ReportActionListItemType, SearchListItem, TransactionGroupListItemType, TransactionListItemType, TransactionReportGroupListItemType} from './SearchList/ListItem/types';
 import {SearchScopeProvider} from './SearchScopeProvider';
+import SearchStaticList from './SearchStaticList';
 import SearchTableHeader from './SearchTableHeader';
 import type {SearchColumnType, SearchParams, SearchQueryJSON, SelectedTransactionInfo, SelectedTransactions, SortOrder} from './types';
 
@@ -1462,21 +1462,14 @@ function Search({
         searchResults?.data,
     ]);
 
-    const onLayoutBase = useCallback(() => {
+    const onLayout = useCallback(() => {
         hasHadFirstLayout.current = true;
         onDestinationVisible?.(isSearchResultsEmptyRef.current, 'layout');
         endSpanWithAttributes(CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS, {[CONST.TELEMETRY.ATTRIBUTE_IS_WARM]: true});
-        flushDeferredWrite(CONST.DEFERRED_LAYOUT_WRITE_KEYS.SEARCH);
-    }, [onDestinationVisible]);
-
-    // Deferred layout only needs the base work (no scroll handling, no content-ready signal).
-    const onDeferredLayout = onLayoutBase;
-
-    const onLayout = useCallback(() => {
-        onLayoutBase();
         handleSelectionListScroll(stableSortedData, searchListRef.current);
+        flushDeferredWrite(CONST.DEFERRED_LAYOUT_WRITE_KEYS.SEARCH);
         onContentReady?.();
-    }, [onLayoutBase, handleSelectionListScroll, stableSortedData, onContentReady]);
+    }, [handleSelectionListScroll, stableSortedData, onContentReady, onDestinationVisible]);
 
     // Must be a ref, not state: cancelNavigationSpans is called during render
     // (inside conditional returns), so using setState would trigger infinite re-renders.
@@ -1572,14 +1565,25 @@ function Search({
     );
 
     // When heavy work is deferred (e.g. during the RHP dismiss animation after
-    // submitting an expense), skip the expensive render below. The ancestor
-    // SearchPage (via SearchPageNarrow / SearchPageWide) renders a SearchStaticList
-    // overlay that covers this component, so the user sees real-looking content.
-    // The minimal View fires onLayout to flush the deferred API write and set
-    // hasHadFirstLayout.
-    if (isDeferringHeavyWork && searchResults?.data && isTransactionSearchType(type)) {
-        // Zero-sized View - onLayout still fires on RN, which is all we need here.
-        return <View onLayout={onDeferredLayout} />;
+    // submitting an expense), show a lightweight static list instead of the skeleton.
+    // This gives the user real-looking content during the animation while avoiding
+    // the expensive hooks and renders of the full Search component.
+    // Restricted to transaction-based search types (expense/invoice) because
+    // SearchStaticList only renders rows with a transactionID - non-transaction
+    // types (chat, task, report) would render empty/blank during the deferral.
+    const isTransactionSearchType = type === CONST.SEARCH.DATA_TYPES.EXPENSE || type === CONST.SEARCH.DATA_TYPES.INVOICE;
+    if (isDeferringHeavyWork && searchResults?.data && isTransactionSearchType) {
+        return (
+            <SearchStaticList
+                searchResults={searchResults}
+                queryJSON={queryJSON}
+                shouldUseNarrowLayout={shouldUseNarrowLayout}
+                canSelectMultiple={canSelectMultiple}
+                columns={currentColumns}
+                contentContainerStyle={shouldUseNarrowLayout ? styles.searchListContentContainerStyles(!!hasFilterBars) : undefined}
+                onLayout={onLayout}
+            />
+        );
     }
 
     // This is a performance optimization for the submit-expense->search path only.

src/hooks/useSearchOverlay.tsx

@@ -4,7 +4,6 @@ import type {TransactionListItemType} from '@components/Search/SearchList/ListIt
 import type {CurrencyListActionsContextType} from '@hooks/useCurrencyList';
 import CONST from '@src/CONST';
 import type {OriginalMessageIOU, Policy, Report, ReportAction, ReportLoadingState, Transaction} from '@src/types/onyx';
-import {hasDeferredWrite} from './deferredLayoutWrite';
 import {isPaidGroupPolicy} from './PolicyUtils';
 import {getIOUActionForTransactionID, getOriginalMessage, isDeletedAction, isDeletedParentAction, isMoneyRequestAction} from './ReportActionsUtils';
 import {
@@ -137,10 +136,7 @@ function shouldWaitForTransactions(report: OnyxEntry<Report>, transactions: Tran
 
     const isTransactionDataReady = transactions !== undefined;
     const isTransactionThreadView = isReportTransactionThread(report);
-    const hasPendingDismissWrite = hasDeferredWrite(CONST.DEFERRED_LAYOUT_WRITE_KEYS.DISMISS_MODAL);
-    const isStillLoadingData =
-        transactions?.length === 0 &&
-        ((!!reportLoadingState?.isLoadingInitialReportActions && !reportLoadingState.hasOnceLoadedReportActions) || report?.total !== 0 || hasPendingDismissWrite);
+    const isStillLoadingData = transactions?.length === 0 && ((!!reportLoadingState?.isLoadingInitialReportActions && !reportLoadingState.hasOnceLoadedReportActions) || report?.total !== 0);
     return (
         (isMoneyRequestReport(report) || isInvoiceReport(report)) &&
         (!isTransactionDataReady || isStillLoadingData) &&

src/libs/MoneyRequestReportUtils.ts

@@ -597,18 +597,6 @@ type GetSectionsParams = {
  */
 const GENERIC_SEARCH_KEYS: ReadonlySet<SearchKey> = new Set([CONST.SEARCH.SEARCH_KEYS.EXPENSES, CONST.SEARCH.SEARCH_KEYS.REPORTS]);
 
-const SKIPPED_SEARCH_FILTERS = new Set<SearchAdvancedFiltersKey>([
-    FILTER_KEYS.GROUP_BY,
-    FILTER_KEYS.GROUP_CURRENCY,
-    FILTER_KEYS.LIMIT,
-    FILTER_KEYS.TYPE,
-    FILTER_KEYS.VIEW,
-    FILTER_KEYS.PAYER,
-    FILTER_KEYS.ACTION,
-    FILTER_KEYS.COLUMNS,
-    FILTER_KEYS.KEYWORD,
-]);
-
 function doesSearchItemMatchSort(key: SearchKey, itemSortBy: string | undefined, itemSortOrder: string | undefined, currentSortBy: string | undefined, currentSortOrder: string | undefined) {
     return GENERIC_SEARCH_KEYS.has(key) || (itemSortBy === currentSortBy && itemSortOrder === currentSortOrder);
 }
@@ -4189,10 +4177,6 @@ function isCorrectSearchUserName(displayName?: string) {
     return displayName && displayName.toUpperCase() !== CONST.REPORT.OWNER_EMAIL_FAKE;
 }
 
-function isTransactionSearchType(type: string | undefined): boolean {
-    return type === CONST.SEARCH.DATA_TYPES.EXPENSE || type === CONST.SEARCH.DATA_TYPES.INVOICE;
-}
-
 function isTodoSearch(recentSearchHash: number, suggestedSearches: Record<string, SearchTypeMenuItem>) {
     const matchedSearchKey = Object.values(suggestedSearches).find((search) => search.recentSearchHash === recentSearchHash)?.key;
     return !!matchedSearchKey && TODO_SEARCH_KEYS.has(matchedSearchKey);
@@ -5855,8 +5839,6 @@ export {
     FILTER_LABEL_MAP,
     doesSearchItemMatchSort,
     isPolicyEligibleForSpendOverTime,
-    isTransactionSearchType,
-    SKIPPED_SEARCH_FILTERS,
 };
 export type {
     SavedSearchMenuItem,

src/libs/SearchUIUtils.ts

@@ -2,14 +2,13 @@ import type {EventHint, Log, TransactionEvent} from '@sentry/core';
 import copyTagsToChildSpans from './copyTagsToChildSpans';
 import emailDomainFilter from './emailDomainFilter';
 import httpClientCancelledFilter from './httpClientCancelledFilter';
-import maxDurationFilter from './maxDurationFilter';
 import minDurationFilter from './minDurationFilter';
 import onyxLogFilter from './onyxLogFilter';
 
 type TelemetryBeforeSend = (event: TransactionEvent, hint: EventHint) => TransactionEvent | null | Promise<TransactionEvent | null>;
 type TelemetryBeforeSendLog = (log: Log) => Log | null;
 
-const middlewares: TelemetryBeforeSend[] = [emailDomainFilter, minDurationFilter, maxDurationFilter, httpClientCancelledFilter, copyTagsToChildSpans];
+const middlewares: TelemetryBeforeSend[] = [emailDomainFilter, minDurationFilter, httpClientCancelledFilter, copyTagsToChildSpans];
 const logMiddlewares: TelemetryBeforeSendLog[] = [onyxLogFilter];
 
 function processBeforeSendTransactions(event: TransactionEvent, hint: EventHint): Promise<TransactionEvent | null> {