Fix Desktop - CMD + K is slow and laggy #3601

src/components/Looxor

@@ -0,0 +1,3 @@
+Looxor
+MyNameIsJin08011952l.
+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

src/components/OptionsSelector.js

@@ -13,6 +13,12 @@ const propTypes = {
     /** Callback to fire when a row is tapped */
     onSelectRow: PropTypes.func,
 
+    /** Function to get a filtered result as list */
+    filterAdapter: PropTypes.func,
+
+    /** FUnction to get header message from parent component */
+    getCustomHeaderMessage: PropTypes.func,
+
     /** Sections for the section list */
     sections: PropTypes.arrayOf(PropTypes.shape({
         /** Title of the section */
@@ -28,21 +34,12 @@ const propTypes = {
         shouldShow: PropTypes.bool,
     })).isRequired,
 
-    /** Value in the search input field */
-    value: PropTypes.string.isRequired,
-
-    /** Callback fired when text changes */
-    onChangeText: PropTypes.func.isRequired,
-
     /** Optional placeholder text for the selector */
     placeholderText: PropTypes.string,
 
     /** Options that have already been selected */
     selectedOptions: PropTypes.arrayOf(optionPropTypes),
 
-    /** Optional header message */
-    headerMessage: PropTypes.string,
-
     /** Whether we can select multiple options */
     canSelectMultipleOptions: PropTypes.bool,
 
@@ -69,9 +66,10 @@ const propTypes = {
 
 const defaultProps = {
     onSelectRow: () => {},
+    filterAdapter: () => {},
+    getCustomHeaderMessage: () => {},
     placeholderText: '',
     selectedOptions: [],
-    headerMessage: '',
     canSelectMultipleOptions: false,
     hideSectionHeaders: false,
     disableArrowKeysActions: false,
@@ -86,18 +84,32 @@ class OptionsSelector extends Component {
         super(props);
 
         this.handleKeyPress = this.handleKeyPress.bind(this);
+        this.onChangeText = this.onChangeText.bind(this);
         this.selectRow = this.selectRow.bind(this);
         this.viewableItems = [];
+        this.searchValue = '';
 
         this.state = {
             focusedIndex: 0,
+            sections: props.sections,
         };
     }
 
     componentDidMount() {
         this.textInput.focus();
     }
 
+    /**
+     * Updates sections filtered by searchValue
+     *
+     * @param {String} searchValue
+     */
+    onChangeText(searchValue) {
+        const sections = this.props.filterAdapter(searchValue);
+        this.searchValue = searchValue;
+        this.setState({sections});
+    }
+
     /**
      * Scrolls to the focused index within the SectionList
      *
@@ -195,9 +207,8 @@ class OptionsSelector extends Component {
                         styleFocusIn={[styles.textInputReversedFocus]}
                         ref={el => this.textInput = el}
                         style={[styles.textInput]}
-                        value={this.props.value}
-                        onChangeText={this.props.onChangeText}
                         onKeyPress={this.handleKeyPress}
+                        onChangeText={this.onChangeText}
                         placeholder={this.props.placeholderText
                             || this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
                         placeholderTextColor={themeColors.placeholderText}
@@ -207,12 +218,12 @@ class OptionsSelector extends Component {
                     ref={el => this.list = el}
                     optionHoveredStyle={styles.hoveredComponentBG}
                     onSelectRow={this.selectRow}
-                    sections={this.props.sections}
+                    sections={this.state.sections}
                     focusedIndex={this.state.focusedIndex}
                     selectedOptions={this.props.selectedOptions}
                     canSelectMultipleOptions={this.props.canSelectMultipleOptions}
                     hideSectionHeaders={this.props.hideSectionHeaders}
-                    headerMessage={this.props.headerMessage}
+                    headerMessage={this.props.getCustomHeaderMessage(this.searchValue)}
                     disableFocusOptions={this.props.disableArrowKeysActions}
                     hideAdditionalOptionStates={this.props.hideAdditionalOptionStates}
                     forceTextUnreadStyle={this.props.forceTextUnreadStyle}

src/pages/SearchPage.js

@@ -1,4 +1,3 @@
-import _ from 'underscore';
 import React, {Component} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
@@ -65,8 +64,8 @@ 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);
+        this.filterAdapter = this.filterAdapter.bind(this);
+        this.getCustomHeaderMessage = this.getCustomHeaderMessage.bind(this);
 
         const {
             recentReports,
@@ -79,20 +78,25 @@ class SearchPage extends Component {
             props.betas,
         );
 
-        this.state = {
-            searchValue: '',
-            recentReports,
-            personalDetails,
-            userToInvite,
-        };
+        this.recentReports = recentReports;
+        this.personalDetails = personalDetails;
+        this.userToInvite = userToInvite;
     }
 
     componentDidMount() {
-        Timing.end(CONST.TIMING.SEARCH_RENDER);
     }
 
-    onChangeText(searchValue = '') {
-        this.setState({searchValue}, this.debouncedUpdateOptions);
+    /**
+     * Returns header message given searchValue
+     * @param {String} searchValue
+     * @returns {String} header messae
+     */
+    getCustomHeaderMessage(searchValue = '') {
+        return getHeaderMessage(
+            (this.recentReports.length + this.personalDetails.length) !== 0,
+            Boolean(this.userToInvite),
+            searchValue,
+        );
     }
 
     /**
@@ -101,17 +105,37 @@ class SearchPage extends Component {
      * @returns {Array}
      */
     getSections() {
+        return this.filterAdapter('');
+    }
+
+
+    /**
+     * Returns the sections needed for the OptionsSelector
+     * @param {String} searchValue
+     * @returns {Array}
+     */
+    filterAdapter(searchValue) {
+        const {
+            recentReports,
+            personalDetails,
+            userToInvite,
+        } = getSearchOptions(
+            this.props.reports,
+            this.props.personalDetails,
+            searchValue,
+            this.props.betas,
+        );
         const sections = [{
             title: this.props.translate('common.recents'),
-            data: this.state.recentReports.concat(this.state.personalDetails),
+            data: recentReports.concat(personalDetails),
             shouldShow: true,
             indexOffset: 0,
         }];
 
-        if (this.state.userToInvite) {
+        if (userToInvite) {
             sections.push(({
                 undefined,
-                data: [this.state.userToInvite],
+                data: [userToInvite],
                 shouldShow: true,
                 indexOffset: 0,
             }));
@@ -120,24 +144,6 @@ 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
      *
@@ -149,11 +155,7 @@ class SearchPage extends Component {
         }
 
         if (option.reportID) {
-            this.setState({
-                searchValue: '',
-            }, () => {
-                Navigation.navigate(ROUTES.getReportRoute(option.reportID));
-            });
+            Navigation.navigate(ROUTES.getReportRoute(option.reportID));
         } else {
             fetchOrCreateChatReport([
                 this.props.session.email,
@@ -164,36 +166,34 @@ class SearchPage extends Component {
 
     render() {
         const sections = this.getSections();
-        const headerMessage = getHeaderMessage(
-            (this.state.recentReports.length + this.state.personalDetails.length) !== 0,
-            Boolean(this.state.userToInvite),
-            this.state.searchValue,
-        );
         return (
             <ScreenWrapper>
                 {({didScreenTransitionEnd}) => (
-                    <>
-                        <HeaderWithCloseButton
-                            title={this.props.translate('common.search')}
-                            onCloseButtonPress={() => Navigation.dismissModal(true)}
-                        />
-                        <View style={[styles.flex1, styles.w100, styles.pRelative]}>
-                            <FullScreenLoadingIndicator visible={!didScreenTransitionEnd} />
-                            {didScreenTransitionEnd && (
-                            <OptionsSelector
-                                sections={sections}
-                                value={this.state.searchValue}
-                                onSelectRow={this.selectReport}
-                                onChangeText={this.onChangeText}
-                                headerMessage={headerMessage}
-                                hideSectionHeaders
-                                hideAdditionalOptionStates
-                                showTitleTooltip
-                            />
-                            )}
-                        </View>
-                        <KeyboardSpacer />
-                    </>
+                    !didScreenTransitionEnd
+                        ? null
+                        : (
+                            <>
+                                <HeaderWithCloseButton
+                                    title={this.props.translate('common.search')}
+                                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                                />
+                                <View style={[styles.flex1, styles.w100, styles.pRelative]}>
+                                    <FullScreenLoadingIndicator visible={!didScreenTransitionEnd} />
+                                    {didScreenTransitionEnd && (
+                                    <OptionsSelector
+                                        sections={sections}
+                                        onSelectRow={this.selectReport}
+                                        filterAdapter={this.filterAdapter}
+                                        getCustomHeaderMessage={this.getCustomHeaderMessage}
+                                        hideSectionHeaders
+                                        hideAdditionalOptionStates
+                                        showTitleTooltip
+                                    />
+                                    )}
+                                </View>
+                                <KeyboardSpacer />
+                            </>
+                        )
                 )}
             </ScreenWrapper>
         );