Merge pull request Expensify#64570 from margelo/@perunt/expenses-list-perf-on-web

FlashList for Expenses list

Author: luacmartins

cspell.json

@@ -688,7 +688,8 @@
         "zxcv",
         "zxldvw",
         "مثال",
-        "pnrs"
+        "pnrs",
+        "POLICYCHANGELOG_ADD_EMPLOYEE"
     ],
     "ignorePaths": [
         "src/languages/de.ts",

ios/Podfile.lock

@@ -2794,7 +2794,7 @@ PODS:
     - Firebase/Performance (= 8.8.0)
     - React-Core
     - RNFBApp
-  - RNFlashList (1.7.6):
+  - RNFlashList (1.8.2):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -3863,7 +3863,7 @@ SPEC CHECKSUMS:
   RNFBApp: 729c0666395b1953198dc4a1ec6deb8fbe1c302e
   RNFBCrashlytics: 2061ca863e8e2fa1aae9b12477d7dfa8e88ca0f9
   RNFBPerf: 389914cda4000fe0d996a752532a591132cbf3f9
-  RNFlashList: 30b68f572400383347ce7df3777985af0d089624
+  RNFlashList: 8d83cb64dc02d78e391b0a9fcb0392a00d7fe407
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNGestureHandler: 5d8431415d4b8518e86e289e9ad5bb9be78f6dba
   RNGoogleSignin: ccaa4a81582cf713eea562c5dd9dc1961a715fd0

package-lock.json

@@ -118,7 +118,7 @@
     "@react-navigation/stack": "7.3.3",
     "@react-ng/bounds-observer": "^0.2.1",
     "@rnmapbox/maps": "10.1.33",
-    "@shopify/flash-list": "1.7.6",
+    "@shopify/flash-list": "1.8.2",
     "@ua/react-native-airship": "~24.4.0",
     "awesome-phonenumber": "^5.4.0",
     "babel-polyfill": "^6.26.0",

package.json

@@ -1,10 +1,11 @@
 import {useIsFocused} from '@react-navigation/native';
-import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import {FlashList} from '@shopify/flash-list';
+import type {FlashListProps, ViewToken} from '@shopify/flash-list';
+import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import type {ForwardedRef} from 'react';
 import {View} from 'react-native';
-import type {FlatList, ListRenderItemInfo, NativeSyntheticEvent, StyleProp, ViewStyle, ViewToken} from 'react-native';
+import type {NativeSyntheticEvent, StyleProp, ViewStyle} from 'react-native';
 import Animated from 'react-native-reanimated';
-import type {FlatListPropsWithLayout} from 'react-native-reanimated';
 import Checkbox from '@components/Checkbox';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
@@ -17,6 +18,7 @@ import type TransactionListItem from '@components/SelectionList/Search/Transacti
 import type {ExtendedTargetedEvent, ReportActionListItemType, TaskListItemType, TransactionGroupListItemType, TransactionListItemType} from '@components/SelectionList/types';
 import Text from '@components/Text';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
+import useInitialWindowDimensions from '@hooks/useInitialWindowDimensions';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
@@ -30,8 +32,12 @@ import {addKeyDownPressListener, removeKeyDownPressListener} from '@libs/Keyboar
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import {createItemHeightCalculator} from './itemHeightCalculator';
+import ITEM_HEIGHTS from './itemHeights';
 import type {SearchQueryJSON} from './types';
 
+const AnimatedFlashListComponent = Animated.createAnimatedComponent(FlashList<SearchListItem>);
+
 type SearchListItem = TransactionListItemType | TransactionGroupListItemType | ReportActionListItemType | TaskListItemType;
 type SearchListItemComponentType = typeof TransactionListItem | typeof ChatListItem | typeof TransactionGroupListItem | typeof TaskListItem;
 
@@ -40,7 +46,7 @@ type SearchListHandle = {
     scrollToIndex: (index: number, animated?: boolean) => void;
 };
 
-type SearchListProps = Pick<FlatListPropsWithLayout<SearchListItem>, 'onScroll' | 'contentContainerStyle' | 'onEndReached' | 'onEndReachedThreshold' | 'ListFooterComponent'> & {
+type SearchListProps = Pick<FlashListProps<SearchListItem>, 'onScroll' | 'contentContainerStyle' | 'onEndReached' | 'onEndReachedThreshold' | 'ListFooterComponent'> & {
     data: SearchListItem[];
 
     /** Default renderer for every item in the list */
@@ -78,15 +84,17 @@ type SearchListProps = Pick<FlatListPropsWithLayout<SearchListItem>, 'onScroll'
     /** Invoked on mount and layout changes */
     onLayout?: () => void;
 
+    /** Styles to apply to the content container */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+
+    /** The estimated height of an item in the list */
+    estimatedItemSize?: number;
+
     /** Whether mobile selection mode is enabled */
     isMobileSelectionModeEnabled: boolean;
 };
 
-const keyExtractor = (item: SearchListItem, index: number) => {
-    return item.keyForList ?? `${index}`;
-};
-
-const onScrollToIndexFailed = () => {};
+const keyExtractor = (item: SearchListItem, index: number) => item.keyForList ?? `${index}`;
 
 function SearchList(
     {
@@ -96,7 +104,7 @@ function SearchList(
         onSelectRow,
         onCheckboxPress,
         canSelectMultiple,
-        onScroll,
+        onScroll = () => {},
         onAllCheckboxPress,
         contentContainerStyle,
         onEndReachedThreshold,
@@ -108,20 +116,33 @@ function SearchList(
         queryJSON,
         onViewableItemsChanged,
         onLayout,
+        estimatedItemSize = ITEM_HEIGHTS.NARROW_WITHOUT_DRAWER.STANDARD,
         isMobileSelectionModeEnabled,
     }: SearchListProps,
     ref: ForwardedRef<SearchListHandle>,
 ) {
     const styles = useThemeStyles();
-    const {hash, groupBy} = queryJSON;
+
+    const {initialHeight, initialWidth} = useInitialWindowDimensions();
+    const {hash, groupBy, type} = queryJSON;
     const flattenedTransactions = groupBy ? (data as TransactionGroupListItemType[]).flatMap((item) => item.transactions) : data;
-    const flattenedTransactionWithoutPendingDelete = flattenedTransactions.filter((t) => t.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE);
-    const selectedItemsLength = flattenedTransactions.reduce((acc, item) => {
-        return item?.isSelected ? acc + 1 : acc;
-    }, 0);
+
+    const flattenedTransactionWithoutPendingDelete = useMemo(
+        () => flattenedTransactions.filter((t) => t?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE),
+        [flattenedTransactions],
+    );
+
+    const selectedItemsLength = useMemo(
+        () =>
+            flattenedTransactions.reduce((acc, item) => {
+                return item?.isSelected ? acc + 1 : acc;
+            }, 0),
+        [flattenedTransactions],
+    );
+
     const {translate} = useLocalize();
     const isFocused = useIsFocused();
-    const listRef = useRef<FlatList<SearchListItem>>(null);
+    const listRef = useRef<FlashList<SearchListItem>>(null);
     const hasKeyBeenPressed = useRef(false);
     const [itemsToHighlight, setItemsToHighlight] = useState<Set<string> | null>(null);
     const itemFocusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -130,7 +151,7 @@ function SearchList(
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout here because there is a race condition that causes shouldUseNarrowLayout to change indefinitely in this component
     // See https://github.com/Expensify/App/issues/48675 for more details
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth} = useResponsiveLayout();
+    const {isSmallScreenWidth, isLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
 
     const [isModalVisible, setIsModalVisible] = useState(false);
     const [longPressedItem, setLongPressedItem] = useState<SearchListItem>();
@@ -271,7 +292,8 @@ function SearchList(
     useImperativeHandle(ref, () => ({scrollAndHighlightItem, scrollToIndex}), [scrollAndHighlightItem, scrollToIndex]);
 
     const renderItem = useCallback(
-        ({item, index}: ListRenderItemInfo<SearchListItem>) => {
+        // eslint-disable-next-line react/no-unused-prop-types
+        ({item, index}: {item: SearchListItem; index: number}) => {
             const isItemFocused = focusedIndex === index;
             const isItemHighlighted = !!itemsToHighlight?.has(item.keyForList ?? '');
             const isDisabled = item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
@@ -332,6 +354,51 @@ function SearchList(
     const selectAllButtonVisible = canSelectMultiple && !SearchTableHeader;
     const isSelectAllChecked = selectedItemsLength > 0 && selectedItemsLength === flattenedTransactionWithoutPendingDelete.length;
 
+    const getItemHeight = useMemo(
+        () =>
+            createItemHeightCalculator({
+                isLargeScreenWidth,
+                shouldUseNarrowLayout,
+                type,
+            }),
+        [isLargeScreenWidth, shouldUseNarrowLayout, type],
+    );
+
+    const overrideItemLayout = useCallback(
+        (layout: {span?: number; size?: number}, item: SearchListItem) => {
+            if (!layout) {
+                return;
+            }
+            const height = getItemHeight(item);
+            // eslint-disable-next-line no-param-reassign
+            return (layout.size = height > 0 ? height : estimatedItemSize);
+        },
+        [getItemHeight, estimatedItemSize],
+    );
+
+    const calculatedListHeight = useMemo(() => {
+        return initialHeight - variables.contentHeaderHeight;
+    }, [initialHeight]);
+
+    const calculatedListWidth = useMemo(() => {
+        if (shouldUseNarrowLayout) {
+            return initialWidth;
+        }
+
+        if (isLargeScreenWidth) {
+            return initialWidth - variables.navigationTabBarSize - variables.sideBarWithLHBWidth;
+        }
+
+        return initialWidth;
+    }, [initialWidth, shouldUseNarrowLayout, isLargeScreenWidth]);
+
+    const estimatedListSize = useMemo(() => {
+        return {
+            height: calculatedListHeight,
+            width: calculatedListWidth,
+        };
+    }, [calculatedListHeight, calculatedListWidth]);
+
     return (
         <View style={[styles.flex1, !isKeyboardShown && safeAreaPaddingBottomStyle, containerStyle]}>
             {tableHeaderVisible && (
@@ -365,22 +432,26 @@ function SearchList(
                 </View>
             )}
 
-            <Animated.FlatList
+            <AnimatedFlashListComponent
                 data={data}
                 renderItem={renderItem}
                 keyExtractor={keyExtractor}
                 onScroll={onScroll}
-                contentContainerStyle={contentContainerStyle}
                 showsVerticalScrollIndicator={false}
                 ref={listRef}
                 extraData={focusedIndex}
                 onEndReached={onEndReached}
                 onEndReachedThreshold={onEndReachedThreshold}
                 ListFooterComponent={ListFooterComponent}
-                removeClippedSubviews
                 onViewableItemsChanged={onViewableItemsChanged}
-                onScrollToIndexFailed={onScrollToIndexFailed}
                 onLayout={onLayout}
+                removeClippedSubviews
+                drawDistance={1000}
+                estimatedItemSize={estimatedItemSize}
+                overrideItemLayout={overrideItemLayout}
+                estimatedListSize={estimatedListSize}
+                contentContainerStyle={contentContainerStyle}
+                overrideProps={{estimatedHeightSize: calculatedListHeight}}
             />
             <Modal
                 isVisible={isModalVisible}

src/components/Search/SearchList.tsx

@@ -1,6 +1,7 @@
 import {useFocusEffect, useIsFocused, useNavigation} from '@react-navigation/native';
+import type {ContentStyle} from '@shopify/flash-list';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import type {NativeScrollEvent, NativeSyntheticEvent, StyleProp, ViewStyle, ViewToken} from 'react-native';
+import type {NativeScrollEvent, NativeSyntheticEvent, ViewToken} from 'react-native';
 import {View} from 'react-native';
 import FullPageErrorView from '@components/BlockingViews/FullPageErrorView';
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
@@ -57,7 +58,8 @@ import type {SearchColumnType, SearchParams, SearchQueryJSON, SelectedTransactio
 type SearchProps = {
     queryJSON: SearchQueryJSON;
     onSearchListScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-    contentContainerStyle?: StyleProp<ViewStyle>;
+    contentContainerStyle?: ContentStyle;
+    // contentContainerStyle?: StyleProp<ViewStyle>; // TODO: remove this
     searchResults?: SearchResults;
     handleSearch: (value: SearchParams) => void;
     isMobileSelectionModeEnabled: boolean;
@@ -200,6 +202,10 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
     }, [selectedTransactions, isMobileSelectionModeEnabled, shouldTurnOffSelectionMode]);
 
     useEffect(() => {
+        if (!isFocused) {
+            return;
+        }
+
         const selectedKeys = Object.keys(selectedTransactions).filter((key) => selectedTransactions[key]);
         if (!isSmallScreenWidth) {
             if (selectedKeys.length === 0 && isMobileSelectionModeEnabled) {
@@ -215,11 +221,12 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
     }, [isSmallScreenWidth, selectedTransactions, isMobileSelectionModeEnabled]);
 
     useEffect(() => {
-        if (isOffline) {
+        if (!isFocused || isOffline) {
             return;
         }
 
         handleSearch({queryJSON, offset});
+        // We don't need to run the effect on change of isFocused.
     }, [handleSearch, isOffline, offset, queryJSON]);
 
     useEffect(() => {
@@ -260,6 +267,10 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
     const isRefreshingSelection = useRef(false);
 
     useEffect(() => {
+        if (!isFocused) {
+            return;
+        }
+
         if (type === CONST.SEARCH.DATA_TYPES.CHAT) {
             return;
         }
@@ -319,7 +330,7 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
 
         isRefreshingSelection.current = true;
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, [data, setSelectedTransactions, isExportMode]);
+    }, [data, setSelectedTransactions, isExportMode, isFocused]);
 
     useEffect(() => {
         if (!isSearchResultsEmpty || prevIsSearchResultEmpty) {
@@ -345,7 +356,11 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
     }, [selectedTransactions]);
 
     useEffect(() => {
-        if (!data.length || isRefreshingSelection.current || !isFocused) {
+        if (!isFocused) {
+            return;
+        }
+
+        if (!data.length || isRefreshingSelection.current) {
             return;
         }
         const areItemsGrouped = !!groupBy;
@@ -458,6 +473,10 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
 
     const onViewableItemsChanged = useCallback(
         ({viewableItems}: {viewableItems: ViewToken[]}) => {
+            if (!isFocused) {
+                return;
+            }
+
             const isFirstItemVisible = viewableItems.at(0)?.index === 1;
             // If the user is still loading the search results, or if they are scrolling down, don't refresh the search results
             if (shouldShowLoadingState || !isFirstItemVisible) {
@@ -470,7 +489,7 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
             // Therefore, when the user scrolls to the top, we need to refresh the search results.
             setOffset(0);
         },
-        [shouldShowLoadingState],
+        [shouldShowLoadingState, isFocused],
     );
 
     const isChat = type === CONST.SEARCH.DATA_TYPES.CHAT;
@@ -506,7 +525,7 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
     const hasErrors = Object.keys(searchResults?.errors ?? {}).length > 0 && !isOffline;
 
     const fetchMoreResults = useCallback(() => {
-        if (!searchResults?.search?.hasMoreResults || shouldShowLoadingState || shouldShowLoadingMoreItems) {
+        if (!isFocused || !searchResults?.search?.hasMoreResults || shouldShowLoadingState || shouldShowLoadingMoreItems) {
             return;
         }
         setOffset(offset + CONST.SEARCH.RESULTS_PAGE_SIZE);
@@ -624,7 +643,7 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
                         />
                     )
                 }
-                contentContainerStyle={[contentContainerStyle, styles.pb3]}
+                contentContainerStyle={{...contentContainerStyle, ...styles.pb3}}
                 containerStyle={[styles.pv0, type === CONST.SEARCH.DATA_TYPES.CHAT && !isSmallScreenWidth && styles.pt3]}
                 shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
                 onScroll={onSearchListScroll}