Debounce search page and reduce number of tooltips created

src/pages/SearchPage.js

@@ -1,3 +1,4 @@
+import _ from 'underscore';
 import React, {Component} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
@@ -64,6 +65,9 @@ class SearchPage extends Component {
         Timing.start(CONST.TIMING.SEARCH_RENDER);
 
         this.selectReport = this.selectReport.bind(this);
+        this.onChangeText = this.onChangeText.bind(this);
+        this.debouncedUpdateOptions = _.debounce(this.updateOptions.bind(this), 300);
+
         const {
             recentReports,
             personalDetails,
@@ -87,6 +91,10 @@ class SearchPage extends Component {
         Timing.end(CONST.TIMING.SEARCH_RENDER);
     }
 
+    onChangeText(searchValue = '') {
+        this.setState({searchValue}, this.debouncedUpdateOptions);
+    }
+
     /**
      * Returns the sections needed for the OptionsSelector
      *
@@ -112,6 +120,24 @@ class SearchPage extends Component {
         return sections;
     }
 
+    updateOptions() {
+        const {
+            recentReports,
+            personalDetails,
+            userToInvite,
+        } = getSearchOptions(
+            this.props.reports,
+            this.props.personalDetails,
+            this.state.searchValue,
+            this.props.betas,
+        );
+        this.setState({
+            userToInvite,
+            recentReports,
+            personalDetails,
+        });
+    }
+
     /**
      * Reset the search value and redirect to the selected report
      *
@@ -158,24 +184,7 @@ class SearchPage extends Component {
                                 sections={sections}
                                 value={this.state.searchValue}
                                 onSelectRow={this.selectReport}
-                                onChangeText={(searchValue = '') => {
-                                    const {
-                                        recentReports,
-                                        personalDetails,
-                                        userToInvite,
-                                    } = getSearchOptions(
-                                        this.props.reports,
-                                        this.props.personalDetails,
-                                        searchValue,
-                                        this.props.betas,
-                                    );
-                                    this.setState({
-                                        searchValue,
-                                        userToInvite,
-                                        recentReports,
-                                        personalDetails,
-                                    });
-                                }}
+                                onChangeText={this.onChangeText}
                                 headerMessage={headerMessage}
                                 hideSectionHeaders
                                 hideAdditionalOptionStates

src/pages/home/sidebar/OptionRow.js

@@ -129,7 +129,10 @@ const OptionRow = ({
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
     const isMultipleParticipant = lodashGet(option, 'participantsList.length', 0) > 1;
     const displayNamesWithTooltips = _.map(
-        option.participantsList,
+
+        // We only create tooltips for the first 10 users or so since some reports have hundreds of users causing
+        // performance to degrade.
+        option.participantsList.slice(0, 10),
         ({displayName, firstName, login}) => {
             const displayNameTrimmed = Str.isSMSLogin(login) ? toLocalPhone(displayName) : displayName;