Skip to content

[perf] Migrate LHNOptionList to FlashList #31711

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
luacmartins merged 10 commits into from
Nov 22, 2023
Merged

[perf] Migrate LHNOptionList to FlashList #31711

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3a69621
migrate LHNOptionsList to FlashList
TMisiukiewicz Nov 16, 2023
b52995e
migrate LHNOptionsList to FlashList
TMisiukiewicz Nov 22, 2023
c94289a
add currentReportID to extraData
TMisiukiewicz Nov 16, 2023
3904226
render list under the skeleton
TMisiukiewicz Nov 16, 2023
a5f09fe
use stylePropTypes
TMisiukiewicz Nov 16, 2023
6a393f2
update keyExtractor
TMisiukiewicz Nov 16, 2023
da1626c
fix reassure tests
TMisiukiewicz Nov 16, 2023
963b4f1
hide vertical scroll indicator
TMisiukiewicz Nov 17, 2023
48cddca
prevent displaying skeleton when list items are ready
TMisiukiewicz Nov 22, 2023
e18243f
fix bg color in skeleton
TMisiukiewicz Nov 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 10 additions & 35 deletions src/components/LHNOptionsList/LHNOptionsList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import {FlashList} from '@shopify/flash-list';
import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
import React, {useCallback} from 'react';
import {FlatList, View} from 'react-native';
import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
import participantPropTypes from '@components/participantPropTypes';
Expand All @@ -11,6 +12,7 @@ import compose from '@libs/compose';
import * as OptionsListUtils from '@libs/OptionsListUtils';
import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
import reportPropTypes from '@pages/reportPropTypes';
import stylePropTypes from '@styles/stylePropTypes';
import useThemeStyles from '@styles/useThemeStyles';
import variables from '@styles/variables';
import CONST from '@src/CONST';
Expand All @@ -19,12 +21,10 @@ import OptionRowLHNData from './OptionRowLHNData';

const propTypes = {
/** Wrapper style for the section list */
// eslint-disable-next-line react/forbid-prop-types
style: PropTypes.arrayOf(PropTypes.object),
style: stylePropTypes,

/** Extra styles for the section list container */
// eslint-disable-next-line react/forbid-prop-types
contentContainerStyles: PropTypes.arrayOf(PropTypes.object).isRequired,
contentContainerStyles: stylePropTypes.isRequired,

/** Sections for the section list */
data: PropTypes.arrayOf(PropTypes.string).isRequired,
Expand Down Expand Up @@ -80,7 +80,7 @@ const defaultProps = {
...withCurrentReportIDDefaultProps,
};

const keyExtractor = (item) => item;
const keyExtractor = (item) => `report_${item}`;

function LHNOptionsList({
style,
Expand All @@ -99,28 +99,6 @@ function LHNOptionsList({
currentReportID,
}) {
const styles = useThemeStyles();
/**
* This function is used to compute the layout of any given item in our list. Since we know that each item will have the exact same height, this is a performance optimization
* so that the heights can be determined before the options are rendered. Otherwise, the heights are determined when each option is rendering and it causes a lot of overhead on large
* lists.
*
* @param {Array} itemData - This is the same as the data we pass into the component
* @param {Number} index the current item's index in the set of data
*
* @returns {Object}
*/
const getItemLayout = useCallback(
(itemData, index) => {
const optionHeight = optionMode === CONST.OPTION_MODE.COMPACT ? variables.optionRowHeightCompact : variables.optionRowHeight;
return {
length: optionHeight,
offset: index * optionHeight,
index,
};
},
[optionMode],
);

/**
* Function which renders a row in the list
*
Expand Down Expand Up @@ -164,20 +142,17 @@ function LHNOptionsList({

return (
<View style={style || styles.flex1}>
<FlatList
<FlashList
indicatorStyle="white"
keyboardShouldPersistTaps="always"
contentContainerStyle={contentContainerStyles}
showsVerticalScrollIndicator={false}
data={data}
testID="lhn-options-list"
keyExtractor={keyExtractor}
stickySectionHeadersEnabled={false}
renderItem={renderItem}
getItemLayout={getItemLayout}
initialNumToRender={20}
maxToRenderPerBatch={5}
windowSize={5}
estimatedItemSize={optionMode === CONST.OPTION_MODE.COMPACT ? variables.optionRowHeightCompact : variables.optionRowHeight}
extraData={[currentReportID]}

@s77rt s77rt Aug 5, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is missing other data, e.g. preferredLocale which caused the list not to re-render on language change

showsVerticalScrollIndicator={false}
/>
</View>
);
Expand Down
27 changes: 16 additions & 11 deletions src/pages/home/sidebar/SidebarLinks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint-disable rulesdir/onyx-props-must-have-default */
import PropTypes from 'prop-types';
import React, {useCallback, useEffect, useRef} from 'react';
import {InteractionManager, View} from 'react-native';
import {InteractionManager, StyleSheet, View} from 'react-native';
import _ from 'underscore';
import LogoComponent from '@assets/images/expensify-wordmark.svg';
import Header from '@components/Header';
Expand Down Expand Up @@ -177,16 +177,21 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
</Tooltip>
<SignInOrAvatarWithOptionalStatus isCreateMenuOpen={isCreateMenuOpen} />
</View>

<LHNOptionsList
style={[isLoading ? styles.flexShrink1 : styles.flex1]}
contentContainerStyles={[styles.sidebarListContainer, {paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}]}
data={optionListItems}
onSelectRow={showReportPage}
shouldDisableFocusOptions={isSmallScreenWidth}
optionMode={viewMode}
/>
{isLoading && <OptionsListSkeletonView shouldAnimate />}
<View style={[styles.pRelative, styles.flex1]}>
<LHNOptionsList
style={styles.flex1}
contentContainerStyles={StyleSheet.flatten([styles.sidebarListContainer, {paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}])}
data={optionListItems}
onSelectRow={showReportPage}
shouldDisableFocusOptions={isSmallScreenWidth}
optionMode={viewMode}
/>
{isLoading && optionListItems.length === 0 && (

@situchan situchan Nov 22, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see that optionListItems.length === 0 && is fixing skeleton issue.
But were you able to find the root cause why this didn't happen on simulator? More importantly, not happened on other platforms? And more strange thing is that no issue on FlatList.

@TMisiukiewicz TMisiukiewicz Nov 22, 2023

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really tried to find the root cause but i wasn't able to do it. I think the reason behind it might be the fact that when you turn off the internet connection on MacOS, the simulator still indicates that the network connection on the device is on (even if the message says you are offline). However that's just my guess, not having this issuse on other platforms is even stranger.
My general understanding of this problem is: when isLoading was true and optionListItems was empty, the FlatList had 0px height and view was filled with skeleton. So when items were already there, and FlatList had a proper height, the Skeleton component was still rendered, but the list already covered 100% of the screen. After migrating to FlashList, the component couldn't have 0px height at any phase of rendering because its using recycling, which has an alghoritm that works only with a valid size (>=2px). With that in mind, the skeleton was displayed on top of the list, using absolute positioning. So each time isLoading was true, it was displayed on top of the list.

@adhorodyski adhorodyski Nov 22, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I went through this problem together with @TMisiukiewicz and the reasoning makes sense to me. Flatlist behaved differently and 0px resulted with a 'ok UI state', whereas Flashlist just uncovered it as a bug.

<View style={[StyleSheet.absoluteFillObject, styles.highlightBG]}>
<OptionsListSkeletonView shouldAnimate />
</View>
)}
</View>
</View>
);
}
Expand Down
1 change: 0 additions & 1 deletion src/styles/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1367,7 +1367,6 @@ const styles = (theme: ThemeColors) =>
},

sidebarListContainer: {
scrollbarWidth: 'none',
paddingBottom: 4,
},

Expand Down
6 changes: 3 additions & 3 deletions tests/perf-test/SidebarLinks.perf-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,9 +105,9 @@ test('should scroll and click some of the items', () => {
expect(lhnOptionsList).toBeDefined();

fireEvent.scroll(lhnOptionsList, eventData);

const button1 = await screen.findByTestId('1');
const button2 = await screen.findByTestId('2');
// find elements that are currently visible in the viewport
const button1 = await screen.findByTestId('7');
const button2 = await screen.findByTestId('8');
fireEvent.press(button1);
fireEvent.press(button2);
};
Expand Down