Merge pull request Expensify#89083 from software-mansion-labs/perf/split-expense-report-list-item-row-defer-action-cell

perf: Split ExpenseReportListItemRow, defer ActionCell, extract Avatar

Author: luacmartins

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/ExpenseReportListItem.tsx

@@ -309,46 +309,22 @@ function ExpenseReportListItem<TItem extends ListItem>({
                             isSelected={!!reportItem.isSelected}
                         />
                     )}
-                    {!isLargeScreenWidth && (
-                        <View style={styles.pt3}>
-                            <ExpenseReportListItemRow
-                                item={reportItem}
-                                columns={columns}
-                                reportActions={reportActions}
-                                isActionLoading={isActionLoading ?? isLoading}
-                                showTooltip={showTooltip}
-                                canSelectMultiple={canSelectMultiple}
-                                onCheckboxPress={handleSelectionButtonPress}
-                                onButtonPress={handleOnButtonPress}
-                                isSelectAllChecked={!!reportItem.isSelected}
-                                isIndeterminate={false}
-                                isDisabledCheckbox={isDisabledCheckbox}
-                                isHovered={hovered}
-                                isFocused={isFocused}
-                                isPendingDelete={isPendingDelete}
-                                isLargeScreenWidth={isLargeScreenWidth}
-                            />
-                        </View>
-                    )}
-                    {isLargeScreenWidth && (
-                        <ExpenseReportListItemRow
-                            item={reportItem}
-                            columns={columns}
-                            reportActions={reportActions}
-                            isActionLoading={isActionLoading ?? isLoading}
-                            showTooltip={showTooltip}
-                            canSelectMultiple={canSelectMultiple}
-                            onCheckboxPress={handleSelectionButtonPress}
-                            onButtonPress={handleOnButtonPress}
-                            isSelectAllChecked={!!reportItem.isSelected}
-                            isIndeterminate={false}
-                            isDisabledCheckbox={isDisabledCheckbox}
-                            isHovered={hovered}
-                            isFocused={isFocused}
-                            isPendingDelete={isPendingDelete}
-                            isLargeScreenWidth={isLargeScreenWidth}
-                        />
-                    )}
+                    <ExpenseReportListItemRow
+                        item={reportItem}
+                        columns={columns}
+                        reportActions={reportActions}
+                        isActionLoading={isActionLoading ?? isLoading}
+                        showTooltip={showTooltip}
+                        canSelectMultiple={canSelectMultiple}
+                        onCheckboxPress={handleSelectionButtonPress}
+                        onButtonPress={handleOnButtonPress}
+                        isSelectAllChecked={!!reportItem.isSelected}
+                        isIndeterminate={false}
+                        isDisabledCheckbox={isDisabledCheckbox}
+                        isHovered={hovered}
+                        isFocused={isFocused}
+                        isPendingDelete={isPendingDelete}
+                    />
                     {getDescription}
                 </View>
             )}

src/components/Search/SearchList/ListItem/ExpenseReportListItemRow/ExpenseReportListItemAvatar.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {View} from 'react-native';
+import SearchReportAvatar from '@components/ReportActionAvatars/SearchReportAvatar';
+import type {ExpenseReportListItemType} from '@components/Search/SearchList/ListItem/types';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+
+type ExpenseReportListItemAvatarProps = {
+    item: ExpenseReportListItemType;
+    showTooltip: boolean;
+    isHovered?: boolean;
+    isFocused?: boolean;
+    isLargeScreenWidth?: boolean;
+};
+
+function ExpenseReportListItemAvatar({item, showTooltip, isHovered = false, isFocused = false, isLargeScreenWidth = false}: ExpenseReportListItemAvatarProps) {
+    const StyleUtils = useStyleUtils();
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    const finalAvatarBorderColor =
+        StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, isFocused || isHovered, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ??
+        theme.highlightBG;
+
+    return (
+        <View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.AVATAR), styles.alignItemsStretch]}>
+            <SearchReportAvatar
+                primaryAvatar={item.primaryAvatar}
+                secondaryAvatar={item.secondaryAvatar}
+                avatarType={item.avatarType}
+                shouldShowTooltip={showTooltip}
+                subscriptAvatarBorderColor={finalAvatarBorderColor}
+                reportID={item.reportID}
+                isLargeScreenWidth={isLargeScreenWidth}
+            />
+        </View>
+    );
+}
+
+export default ExpenseReportListItemAvatar;

src/components/Search/SearchList/ListItem/ExpenseReportListItemRow/ExpenseReportListItemRowNarrow.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import {View} from 'react-native';
+import Checkbox from '@components/Checkbox';
+import Text from '@components/Text';
+import {useCurrencyListActions} from '@hooks/useCurrencyList';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import DateUtils from '@libs/DateUtils';
+import CONST from '@src/CONST';
+import type {ExpenseReportListItemRowNarrowProps} from './types';
+
+function ExpenseReportListItemRowNarrow({item, onCheckboxPress = () => {}, canSelectMultiple, isSelectAllChecked, isIndeterminate, isDisabledCheckbox}: ExpenseReportListItemRowNarrowProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {convertToDisplayString} = useCurrencyListActions();
+
+    const currency = item.currency ?? CONST.CURRENCY.USD;
+    const {totalDisplaySpend = 0, isAllScanning: isScanning = false} = item;
+
+    const filteredTransactions = item.transactions?.filter((t) => t.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE);
+    const expenseCount = (filteredTransactions?.length ? filteredTransactions.length : undefined) ?? item.transactionCount ?? 0;
+    const expenseCountText = translate('iou.expenseCount', {count: expenseCount});
+    const formattedDate = DateUtils.formatWithUTCTimeZone(
+        item.created ?? '',
+        DateUtils.doesDateBelongToAPastYear(item.created ?? '') ? CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT : CONST.DATE.MONTH_DAY_ABBR_FORMAT,
+    );
+
+    const amountText = isScanning ? translate('iou.receiptStatusTitle') : convertToDisplayString(totalDisplaySpend, currency);
+    const groupAccessibilityLabel = [item.reportName, amountText, formattedDate, expenseCountText].filter(Boolean).join(', ');
+
+    return (
+        <View
+            style={[styles.flexRow, styles.alignItemsCenter, styles.gap3, styles.pt3]}
+            accessible
+            accessibilityLabel={groupAccessibilityLabel}
+            role={CONST.ROLE.BUTTON}
+        >
+            {!!canSelectMultiple && (
+                <Checkbox
+                    onPress={onCheckboxPress}
+                    isChecked={isSelectAllChecked}
+                    isIndeterminate={isIndeterminate}
+                    containerStyle={styles.m0}
+                    disabled={isDisabledCheckbox}
+                    accessibilityLabel={item.text ?? ''}
+                    shouldStopMouseDownPropagation
+                    style={[styles.cursorUnset, isDisabledCheckbox && styles.cursorDisabled]}
+                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.EXPENSE_REPORT_CHECKBOX}
+                />
+            )}
+            <View style={[styles.flexColumn, styles.gap1, styles.flex1]}>
+                <View style={[styles.flexRow, styles.gap2]}>
+                    <Text
+                        numberOfLines={2}
+                        style={[styles.lh20, styles.flex1]}
+                    >
+                        {item.reportName ?? ''}
+                    </Text>
+                    <Text style={[styles.lh20, styles.flexShrink0, styles.textAlignRight]}>{amountText}</Text>
+                </View>
+                <View style={[styles.flexRow, styles.gap2]}>
+                    <Text style={[styles.mutedNormalTextLabel, styles.flex1]}>{formattedDate}</Text>
+                    <Text style={[styles.mutedNormalTextLabel, styles.flexShrink0, styles.textAlignRight]}>{expenseCountText}</Text>
+                </View>
+            </View>
+        </View>
+    );
+}
+
+export default ExpenseReportListItemRowNarrow;