Optimize the left-hand-nav to only render options when they need to be visible

jest/setup.js

@@ -23,6 +23,19 @@ jest.mock('../src/libs/BootSplash', () => ({
     getVisibilityStatus: jest.fn().mockResolvedValue('hidden'),
 }));
 
+jest.mock('react-native-blob-util', () => ({}));
+
+// Turn off the console logs for timing events. They are not relevant for unit tests and create a lot of noise
+jest.spyOn(console, 'debug').mockImplementation((...params) => {
+    if (params[0].indexOf('Timing:') === 0) {
+        return;
+    }
+
+    // Send the message to console.log but don't re-used console.debug or else this mock method is called in an infinite loop. Instead, just prefix the output with the word "DEBUG"
+    // eslint-disable-next-line no-console
+    console.log('DEBUG', ...params);
+});
+
 // Local notifications (a.k.a. browser notifications) do not run in native code. Our jest tests will also run against
 // any index.native.js files as they are using a react-native plugin. However, it is useful to mock this behavior so that we
 // can test the expected web behavior and see if a browser notification would be shown or not.

package.json

@@ -71,7 +71,6 @@
     "htmlparser2": "^7.2.0",
     "localforage": "^1.10.0",
     "lodash": "4.17.21",
-    "memoize-one": "^6.0.0",
     "metro-config": "^0.71.3",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.31",

src/components/LHNOptionsList/LHNOptionsList.js

@@ -0,0 +1,104 @@
+import _ from 'underscore';
+import React, {Component} from 'react';
+import {View, FlatList} from 'react-native';
+import PropTypes from 'prop-types';
+import styles from '../../styles/styles';
+import OptionRowLHN from './OptionRowLHN';
+import variables from '../../styles/variables';
+import CONST from '../../CONST';
+
+const propTypes = {
+    /** Extra styles for the section list container */
+    // eslint-disable-next-line react/forbid-prop-types
+    contentContainerStyles: PropTypes.arrayOf(PropTypes.object).isRequired,
+
+    /** Sections for the section list */
+    data: PropTypes.arrayOf(PropTypes.string).isRequired,
+
+    /** Index for option to focus on */
+    focusedIndex: PropTypes.number.isRequired,
+
+    /** Callback to fire when a row is selected */
+    onSelectRow: PropTypes.func.isRequired,
+
+    /** Toggle between compact and default view of the option */
+    optionMode: PropTypes.oneOf(_.values(CONST.OPTION_MODE)).isRequired,
+
+    /** Callback to execute when the SectionList lays out */
+    onLayout: PropTypes.func.isRequired,
+};
+
+class LHNOptionsList extends Component {
+    constructor(props) {
+        super(props);
+
+        this.renderItem = this.renderItem.bind(this);
+        this.getItemLayout = this.getItemLayout.bind(this);
+    }
+
+    /**
+     * 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} data - 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}
+     */
+    getItemLayout(data, index) {
+        const optionHeight = this.props.optionMode === CONST.OPTION_MODE.COMPACT ? variables.optionRowHeightCompact : variables.optionRowHeight;
+        return {
+            length: optionHeight,
+            offset: index * optionHeight,
+            index,
+        };
+    }
+
+    /**
+     * Function which renders a row in the list
+     *
+     * @param {Object} params
+     * @param {Object} params.item
+     * @param {Number} params.index
+     *
+     * @return {Component}
+     */
+    renderItem({item, index}) {
+        return (
+            <OptionRowLHN
+                reportID={item}
+                viewMode={this.props.optionMode}
+                isFocused={this.props.focusedIndex === index}
+                onSelectRow={this.props.onSelectRow}
+            />
+        );
+    }
+
+    render() {
+        return (
+            <View style={[styles.flex1]}>
+                <FlatList
+                    indicatorStyle="white"
+                    keyboardShouldPersistTaps="always"
+                    contentContainerStyle={this.props.contentContainerStyles}
+                    showsVerticalScrollIndicator={false}
+                    data={this.props.data}
+                    keyExtractor={item => item}
+                    stickySectionHeadersEnabled={false}
+                    renderItem={this.renderItem}
+                    getItemLayout={this.getItemLayout}
+                    extraData={this.props.focusedIndex}
+                    initialNumToRender={5}
+                    maxToRenderPerBatch={5}
+                    windowSize={5}
+                    onLayout={this.props.onLayout}
+                />
+            </View>
+        );
+    }
+}
+
+LHNOptionsList.propTypes = propTypes;
+
+export default LHNOptionsList;

src/components/LHNOptionsList/OptionRowLHN.js

@@ -0,0 +1,226 @@
+import _ from 'underscore';
+import lodashGet from 'lodash/get';
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+    TouchableOpacity,
+    View,
+    StyleSheet,
+} from 'react-native';
+import styles from '../../styles/styles';
+import * as StyleUtils from '../../styles/StyleUtils';
+import Icon from '../Icon';
+import * as Expensicons from '../Icon/Expensicons';
+import MultipleAvatars from '../MultipleAvatars';
+import Hoverable from '../Hoverable';
+import DisplayNames from '../DisplayNames';
+import IOUBadge from '../IOUBadge';
+import colors from '../../styles/colors';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import Text from '../Text';
+import SubscriptAvatar from '../SubscriptAvatar';
+import CONST from '../../CONST';
+import * as ReportUtils from '../../libs/ReportUtils';
+import variables from '../../styles/variables';
+import themeColors from '../../styles/themes/default';
+import SidebarUtils from '../../libs/SidebarUtils';
+
+const propTypes = {
+    /** Style for hovered state */
+    // eslint-disable-next-line react/forbid-prop-types
+    hoverStyle: PropTypes.object,
+
+    /** The ID of the report that the option is for */
+    reportID: PropTypes.string.isRequired,
+
+    /** Whether this option is currently in focus so we can modify its style */
+    isFocused: PropTypes.bool,
+
+    /** A function that is called when an option is selected. Selected option is passed as a param */
+    onSelectRow: PropTypes.func,
+
+    /** Toggle between compact and default view */
+    viewMode: PropTypes.oneOf(_.values(CONST.OPTION_MODE)),
+
+    style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    hoverStyle: styles.sidebarLinkHover,
+    viewMode: 'default',
+    onSelectRow: () => {},
+    isFocused: false,
+    style: null,
+};
+
+const OptionRowLHN = (props) => {
+    const optionItem = SidebarUtils.getOptionData(props.reportID);
+    if (!optionItem) {
+        return null;
+    }
+
+    let touchableRef = null;
+    const textStyle = props.isFocused
+        ? styles.sidebarLinkActiveText
+        : styles.sidebarLinkText;
+    const textUnreadStyle = optionItem.isUnread
+        ? [textStyle, styles.sidebarLinkTextUnread] : [textStyle];
+    const displayNameStyle = StyleUtils.combineStyles(props.viewMode === CONST.OPTION_MODE.COMPACT
+        ? [styles.optionDisplayName, ...textUnreadStyle, styles.optionDisplayNameCompact, styles.mr2]
+        : [styles.optionDisplayName, ...textUnreadStyle], props.style);
+    const alternateTextStyle = StyleUtils.combineStyles(props.viewMode === CONST.OPTION_MODE.COMPACT
+        ? [textStyle, styles.optionAlternateText, styles.textLabelSupporting, styles.optionAlternateTextCompact]
+        : [textStyle, styles.optionAlternateText, styles.textLabelSupporting], props.style);
+    const contentContainerStyles = props.viewMode === CONST.OPTION_MODE.COMPACT
+        ? [styles.flex1, styles.flexRow, styles.overflowHidden, styles.alignItemsCenter]
+        : [styles.flex1];
+    const sidebarInnerRowStyle = StyleSheet.flatten(props.viewMode === CONST.OPTION_MODE.COMPACT ? [
+        styles.chatLinkRowPressable,
+        styles.flexGrow1,
+        styles.optionItemAvatarNameWrapper,
+        styles.optionRowCompact,
+        styles.justifyContentCenter,
+    ] : [
+        styles.chatLinkRowPressable,
+        styles.flexGrow1,
+        styles.optionItemAvatarNameWrapper,
+        styles.optionRow,
+        styles.justifyContentCenter,
+    ]);
+    const hoveredBackgroundColor = props.hoverStyle && props.hoverStyle.backgroundColor
+        ? props.hoverStyle.backgroundColor
+        : themeColors.sidebar;
+    const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
+    const isMultipleParticipant = lodashGet(optionItem, 'participantsList.length', 0) > 1;
+
+    // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade.
+    const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips((optionItem.participantsList || []).slice(0, 10), isMultipleParticipant);
+    const avatarTooltips = !optionItem.isChatRoom && !optionItem.isArchivedRoom ? _.pluck(displayNamesWithTooltips, 'tooltip') : undefined;
+
+    return (
+        <Hoverable>
+            {hovered => (
+                <TouchableOpacity
+                    ref={el => touchableRef = el}
+                    onPress={(e) => {
+                        if (e) {
+                            e.preventDefault();
+                        }
+
+                        props.onSelectRow(optionItem, touchableRef);
+                    }}
+                    activeOpacity={0.8}
+                    style={[
+                        styles.flexRow,
+                        styles.alignItemsCenter,
+                        styles.justifyContentBetween,
+                        styles.sidebarLink,
+                        styles.sidebarLinkInner,
+                        StyleUtils.getBackgroundColorStyle(themeColors.sidebar),
+                        props.isFocused ? styles.sidebarLinkActive : null,
+                        hovered && !props.isFocused ? props.hoverStyle : null,
+                    ]}
+                >
+                    <View accessibilityHint="Navigates to a chat" style={sidebarInnerRowStyle}>
+                        <View
+                            style={[
+                                styles.flexRow,
+                                styles.alignItemsCenter,
+                            ]}
+                        >
+                            {
+                                !_.isEmpty(optionItem.icons)
+                                && (
+                                    optionItem.shouldShowSubscript ? (
+                                        <SubscriptAvatar
+                                            mainAvatar={optionItem.icons[0]}
+                                            secondaryAvatar={optionItem.icons[1]}
+                                            mainTooltip={optionItem.ownerEmail}
+                                            secondaryTooltip={optionItem.subtitle}
+                                            size={props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
+                                        />
+                                    ) : (
+                                        <MultipleAvatars
+                                            icons={optionItem.icons}
+                                            size={props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
+                                            secondAvatarStyle={[
+                                                StyleUtils.getBackgroundAndBorderStyle(themeColors.sidebar),
+                                                props.isFocused
+                                                    ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor)
+                                                    : undefined,
+                                                hovered && !props.isFocused
+                                                    ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor)
+                                                    : undefined,
+                                            ]}
+                                            avatarTooltips={optionItem.isPolicyExpenseChat ? [optionItem.subtitle] : avatarTooltips}
+                                        />
+                                    )
+                                )
+                            }
+                            <View style={contentContainerStyles}>
+                                <DisplayNames
+                                    accessibilityLabel="Chat user display names"
+                                    fullTitle={optionItem.text}
+                                    displayNamesWithTooltips={displayNamesWithTooltips}
+                                    tooltipEnabled
+                                    numberOfLines={1}
+                                    textStyles={displayNameStyle}
+                                    shouldUseFullTitle={optionItem.isChatRoom || optionItem.isPolicyExpenseChat}
+                                />
+                                {optionItem.alternateText ? (
+                                    <Text
+                                        style={alternateTextStyle}
+                                        numberOfLines={1}
+                                        accessibilityLabel="Last chat message preview"
+                                    >
+                                        {optionItem.alternateText}
+                                    </Text>
+                                ) : null}
+                            </View>
+                            {optionItem.descriptiveText ? (
+                                <View style={[styles.flexWrap]}>
+                                    <Text style={[styles.textLabel]}>
+                                        {optionItem.descriptiveText}
+                                    </Text>
+                                </View>
+                            ) : null}
+                            {optionItem.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR && (
+                                <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
+                                    <Icon
+                                        src={Expensicons.DotIndicator}
+                                        fill={colors.red}
+                                        height={variables.iconSizeSmall}
+                                        width={variables.iconSizeSmall}
+                                    />
+                                </View>
+                            )}
+                        </View>
+                    </View>
+                    <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                        {optionItem.hasDraftComment && (
+                            <View style={styles.ml2}>
+                                <Icon src={Expensicons.Pencil} height={16} width={16} />
+                            </View>
+                        )}
+                        {optionItem.hasOutstandingIOU && (
+                            <IOUBadge iouReportID={optionItem.iouReportID} />
+                        )}
+                        {optionItem.isPinned && (
+                            <View style={styles.ml2}>
+                                <Icon src={Expensicons.Pin} height={16} width={16} />
+                            </View>
+                        )}
+                    </View>
+                </TouchableOpacity>
+            )}
+        </Hoverable>
+    );
+};
+
+OptionRowLHN.propTypes = propTypes;
+OptionRowLHN.defaultProps = defaultProps;
+OptionRowLHN.displayName = 'OptionRowLHN';
+
+export default withLocalize(OptionRowLHN);