perf: Split TransactionItemRow into narrow and wide versions

src/components/Search/SearchList/ListItem/ActionCell/DeferredActionCell.tsx

@@ -0,0 +1,39 @@
+import React, {useDeferredValue} from 'react';
+import Button from '@components/Button';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import ActionCell from '.';
+import type {ActionCellProps} from '.';
+import actionTranslationsMap from './actionTranslationsMap';
+
+function DeferredActionCell(actionCellProps: ActionCellProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const shouldRender = useDeferredValue(true, false);
+
+    if (!shouldRender) {
+        const action = actionCellProps.action ?? CONST.SEARCH.ACTION_TYPES.VIEW;
+        const shouldUseViewAction = action === CONST.SEARCH.ACTION_TYPES.VIEW || action === CONST.SEARCH.ACTION_TYPES.PAID || action === CONST.SEARCH.ACTION_TYPES.DONE;
+        const isSuccess = !shouldUseViewAction && action !== CONST.SEARCH.ACTION_TYPES.UNDELETE;
+        const text = shouldUseViewAction ? translate(actionTranslationsMap[CONST.SEARCH.ACTION_TYPES.VIEW]) : translate(actionTranslationsMap[action]);
+
+        return (
+            <Button
+                text={text}
+                small={!actionCellProps.extraSmall}
+                extraSmall={actionCellProps.extraSmall}
+                style={[styles.w100, styles.pointerEventsNone]}
+                isDisabled
+                success={isSuccess}
+                isNested
+            />
+        );
+    }
+
+    // Deferred wrapper intentionally forwards all props to the underlying component
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <ActionCell {...actionCellProps} />;
+}
+
+export default DeferredActionCell;

src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemNarrow.tsx

@@ -0,0 +1,137 @@
+import React, {useRef} from 'react';
+import type {View} from 'react-native';
+import {getButtonRole} from '@components/Button/utils';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import UserInfoAndActionButtonRow from '@components/Search/SearchList/ListItem/UserInfoAndActionButtonRow';
+import type {ListItem} from '@components/SelectionList/types';
+import TransactionItemRow from '@components/TransactionItemRow';
+import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useSyncFocus from '@hooks/useSyncFocus';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import type {TransactionListItemNarrowProps} from './types';
+
+function TransactionListItemNarrow<TItem extends ListItem>({
+    item,
+    transactionItem,
+    isDeletedTransaction,
+    isFocused,
+    showTooltip,
+    isDisabled,
+    canSelectMultiple,
+    onSelectRow,
+    onCheckboxPress,
+    onFocus,
+    onLongPressRow,
+    shouldSyncFocus,
+    columns,
+    isLoading,
+    isActionLoading,
+    isLastItem,
+    isFirstItem,
+    transactionViolations,
+    handleActionButtonPress,
+    transactionPreviewData,
+    exportedReportActions,
+    nonPersonalAndWorkspaceCards,
+    policyForMovingExpenses,
+}: TransactionListItemNarrowProps<TItem>) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+    const StyleUtils = useStyleUtils();
+    const pressableRef = useRef<View>(null);
+    useSyncFocus(pressableRef, !!isFocused, shouldSyncFocus);
+
+    const pressableStyle = [
+        styles.transactionListItemStyle,
+        styles.p4,
+        styles.noBorderRadius,
+        item.isSelected && styles.activeComponentBG,
+        {...styles.flexColumn, ...styles.alignItemsStretch},
+    ];
+
+    const animatedHighlightStyle = useAnimatedHighlightStyle({
+        borderRadius: 0,
+        shouldHighlight: item?.shouldAnimateInHighlight ?? false,
+        highlightColor: theme.messageHighlightBG,
+        backgroundColor: item.isSelected ? theme.activeComponentBG : theme.highlightBG,
+        shouldApplyOtherStyles: true,
+    });
+
+    return (
+        <OfflineWithFeedback pendingAction={item.pendingAction}>
+            <PressableWithFeedback
+                ref={pressableRef}
+                onLongPress={() => onLongPressRow?.(item)}
+                onPress={isDeletedTransaction && !canSelectMultiple ? undefined : () => onSelectRow(item, transactionPreviewData)}
+                disabled={isDisabled && !item.isSelected}
+                accessibilityLabel={item.text ?? ''}
+                role={!isDeletedTransaction ? getButtonRole(true) : 'none'}
+                isNested
+                onMouseDown={(e) => e.preventDefault()}
+                hoverStyle={[!item.isDisabled && styles.hoveredComponentBG, item.isSelected && styles.activeComponentBG]}
+                dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true, [CONST.INNER_BOX_SHADOW_ELEMENT]: false}}
+                id={item.keyForList ?? ''}
+                sentryLabel={CONST.SENTRY_LABEL.SEARCH.TRANSACTION_LIST_ITEM}
+                style={[
+                    pressableStyle,
+                    isFocused && StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
+                    isDeletedTransaction && styles.cursorDefault,
+                ]}
+                onFocus={onFocus}
+                wrapperStyle={[
+                    styles.mh5,
+                    styles.flex1,
+                    animatedHighlightStyle,
+                    styles.userSelectNone,
+                    isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden, styles.searchTableTopRadius],
+                    isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden, styles.searchTableBottomRadius],
+                    !isLastItem && StyleUtils.getSelectedBorderBottomStyle(item.isSelected),
+                ]}
+            >
+                {() => (
+                    <>
+                        <UserInfoAndActionButtonRow
+                            item={transactionItem}
+                            shouldShowUserInfo={!isDeletedTransaction && !!transactionItem?.from}
+                            stateNum={transactionItem.report?.stateNum}
+                            statusNum={transactionItem.report?.statusNum}
+                            isSelected={!!transactionItem.isSelected}
+                        />
+                        <TransactionItemRow
+                            transactionItem={transactionItem}
+                            report={transactionItem.report}
+                            policy={transactionItem.policy}
+                            shouldShowTooltip={showTooltip}
+                            onButtonPress={handleActionButtonPress}
+                            onCheckboxPress={() => onCheckboxPress?.(item)}
+                            shouldUseNarrowLayout
+                            isLargeScreenWidth={false}
+                            columns={columns}
+                            isActionLoading={isLoading ?? isActionLoading}
+                            isSelected={!!transactionItem.isSelected}
+                            isDisabled={!!isDisabled}
+                            dateColumnSize={CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
+                            amountColumnSize={CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
+                            taxAmountColumnSize={CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
+                            shouldShowCheckbox={!!canSelectMultiple}
+                            checkboxSentryLabel={CONST.SENTRY_LABEL.SEARCH.TRANSACTION_LIST_ITEM_CHECKBOX}
+                            style={[styles.p3, styles.pv2, styles.p0, styles.pt3, isLastItem ? styles.searchTableBottomRadius : styles.noBorderRadius]}
+                            violations={transactionViolations}
+                            onArrowRightPress={isDeletedTransaction ? undefined : () => onSelectRow(item, transactionPreviewData)}
+                            isHover={false}
+                            nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards}
+                            reportActions={exportedReportActions}
+                            policyForMovingExpenses={policyForMovingExpenses}
+                        />
+                    </>
+                )}
+            </PressableWithFeedback>
+        </OfflineWithFeedback>
+    );
+}
+
+export default TransactionListItemNarrow;

src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemWide.tsx

@@ -0,0 +1,140 @@
+import React, {useRef} from 'react';
+import type {View} from 'react-native';
+import {getButtonRole} from '@components/Button/utils';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import type {ListItem} from '@components/SelectionList/types';
+import TransactionItemRow from '@components/TransactionItemRow';
+import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useSyncFocus from '@hooks/useSyncFocus';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import type {TransactionListItemWideProps} from './types';
+
+function TransactionListItemWide<TItem extends ListItem>({
+    item,
+    transactionItem,
+    isDeletedTransaction,
+    isFocused,
+    showTooltip,
+    isDisabled,
+    canSelectMultiple,
+    onSelectRow,
+    onCheckboxPress,
+    onFocus,
+    onLongPressRow,
+    shouldSyncFocus,
+    columns,
+    isLoading,
+    isActionLoading,
+    isLastItem,
+    transactionViolations,
+    handleActionButtonPress,
+    transactionPreviewData,
+    exportedReportActions,
+    nonPersonalAndWorkspaceCards,
+    policyForMovingExpenses,
+}: TransactionListItemWideProps<TItem>) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+    const StyleUtils = useStyleUtils();
+    const pressableRef = useRef<View>(null);
+    useSyncFocus(pressableRef, !!isFocused, shouldSyncFocus);
+
+    const amountColumnSize = transactionItem.isAmountColumnWide ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL;
+    const taxAmountColumnSize = transactionItem.isTaxAmountColumnWide ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL;
+    const dateColumnSize = transactionItem.shouldShowYear ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL;
+    const submittedColumnSize = transactionItem.shouldShowYearSubmitted ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL;
+    const approvedColumnSize = transactionItem.shouldShowYearApproved ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL;
+    const postedColumnSize = transactionItem.shouldShowYearPosted ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL;
+    const exportedColumnSize = transactionItem.shouldShowYearExported ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL;
+
+    const pressableStyle = [
+        styles.transactionListItemStyle,
+        item.isSelected && styles.activeComponentBG,
+        {
+            ...styles.flexRow,
+            ...styles.justifyContentBetween,
+            ...styles.alignItemsCenter,
+            ...StyleUtils.getSearchTableRowPressableStyle(!!isLastItem, item.isSelected),
+        },
+    ];
+
+    const animatedHighlightStyle = useAnimatedHighlightStyle({
+        borderRadius: 0,
+        shouldHighlight: item?.shouldAnimateInHighlight ?? false,
+        highlightColor: theme.messageHighlightBG,
+        backgroundColor: item.isSelected ? theme.activeComponentBG : theme.highlightBG,
+        shouldApplyOtherStyles: false,
+    });
+
+    return (
+        <OfflineWithFeedback pendingAction={item.pendingAction}>
+            <PressableWithFeedback
+                ref={pressableRef}
+                onLongPress={() => onLongPressRow?.(item)}
+                onPress={isDeletedTransaction && !canSelectMultiple ? undefined : () => onSelectRow(item, transactionPreviewData)}
+                disabled={isDisabled && !item.isSelected}
+                accessibilityLabel={item.text ?? ''}
+                role={!isDeletedTransaction ? getButtonRole(true) : 'none'}
+                isNested
+                onMouseDown={(e) => e.preventDefault()}
+                hoverStyle={[!item.isDisabled && styles.hoveredComponentBG, item.isSelected && styles.activeComponentBG]}
+                dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true, [CONST.INNER_BOX_SHADOW_ELEMENT]: false}}
+                id={item.keyForList ?? ''}
+                sentryLabel={CONST.SENTRY_LABEL.SEARCH.TRANSACTION_LIST_ITEM}
+                style={[
+                    pressableStyle,
+                    isFocused && StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
+                    isDeletedTransaction && styles.cursorDefault,
+                ]}
+                onFocus={onFocus}
+                wrapperStyle={[
+                    styles.mh5,
+                    styles.flex1,
+                    animatedHighlightStyle,
+                    styles.userSelectNone,
+                    isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden, styles.searchTableBottomRadius],
+                ]}
+            >
+                {({hovered}) => (
+                    <TransactionItemRow
+                        transactionItem={transactionItem}
+                        report={transactionItem.report}
+                        policy={transactionItem.policy}
+                        shouldShowTooltip={showTooltip}
+                        onButtonPress={handleActionButtonPress}
+                        onCheckboxPress={() => onCheckboxPress?.(item)}
+                        shouldUseNarrowLayout={false}
+                        isLargeScreenWidth
+                        columns={columns}
+                        isActionLoading={isLoading ?? isActionLoading}
+                        isSelected={!!transactionItem.isSelected}
+                        isDisabled={!!isDisabled}
+                        dateColumnSize={dateColumnSize}
+                        submittedColumnSize={submittedColumnSize}
+                        approvedColumnSize={approvedColumnSize}
+                        postedColumnSize={postedColumnSize}
+                        exportedColumnSize={exportedColumnSize}
+                        amountColumnSize={amountColumnSize}
+                        taxAmountColumnSize={taxAmountColumnSize}
+                        isActionColumnWide={transactionItem.isActionColumnWide}
+                        shouldShowCheckbox={!!canSelectMultiple}
+                        checkboxSentryLabel={CONST.SENTRY_LABEL.SEARCH.TRANSACTION_LIST_ITEM_CHECKBOX}
+                        style={[styles.p3, styles.pv2, isLastItem ? styles.searchTableBottomRadius : styles.noBorderRadius]}
+                        violations={transactionViolations}
+                        onArrowRightPress={isDeletedTransaction ? undefined : () => onSelectRow(item, transactionPreviewData)}
+                        isHover={hovered}
+                        nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards}
+                        reportActions={exportedReportActions}
+                        policyForMovingExpenses={policyForMovingExpenses}
+                    />
+                )}
+            </PressableWithFeedback>
+        </OfflineWithFeedback>
+    );
+}
+
+export default TransactionListItemWide;