Searching bogs down while typing a search term

[strbean]

Reproducing:

1) Use redoc on a large spec.

2) Quickly type a phrase into the search bar

Result:

The UI hangs, a search is performed for each change event.

Fix:

Debounce searches, so a search is only performed when a certain amount of time has passed since the last change event.

[strbean]

I snooped around to see if there was an existing dependency that provided a debounce implementation. Just a quick note: decko.debounce does not debounce! It is meant for throttling calls to functions that are strictly side-effecting, and debounced functions will not return anything!

[jk-skim]

I'm having the same issue and I don't have any clue how do debounce searches.

There must be a way as there don't seem to have issue. https://www.zuora.com/developer/api-reference/#section/API-Versions https://rebilly.github.io/RebillyAPI/

Any help will be appreciated.

Thanks.

[strbean]

If I have some time this week I can give it a shot. Lodash has a debounce implementation, and it is a subdependency already...

[jk-skim]

Hi strbean, Did you get a chance to look at a debounce implementation?

Is there anyone who has done this?

[strbean]

Unfortunately, I wasn't able to get tests passing on a fresh clone here. My dev environments atm is strictly python, haven't gotten to touch JS at work yet :'(, so I don't think I can dig into it right now.

This seemed to work though well, if you/anyone wants to apply it and make a PR:

diff --git a/package.json b/package.json
index 5b199dc..26c83f4 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,6 @@
     "html-webpack-plugin": "^3.1.0",
     "jest": "^24.8.0",
     "license-checker": "^25.0.1",
-    "lodash": "^4.17.15",
     "mobx": "^4.3.1",
     "prettier": "^1.18.2",
     "prettier-eslint": "^9.0.0",
@@ -144,6 +143,7 @@
     "marked": "^0.7.0",
     "memoize-one": "^5.0.5",
     "mobx-react": "^6.1.1",
+    "lodash": "^4.17.15",
     "openapi-sampler": "1.0.0-beta.15",
     "perfect-scrollbar": "^1.4.0",
     "polished": "^3.4.1",
diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx
index e6ade2c..4517809 100644
--- a/src/components/SearchBox/SearchBox.tsx
+++ b/src/components/SearchBox/SearchBox.tsx
@@ -1,3 +1,4 @@
+import { debounce } from 'lodash';
 import * as React from 'react';

 import { IMenuItem } from '../../services/MenuStore';
@@ -41,6 +42,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
       term: '',
       activeItemIdx: -1,
     };
+    this.search = debounce(this.search, 500);
   }

   clearResults(term: string) {
@@ -99,8 +101,9 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
     this.props.marker.mark(term);
   }

-  search = (event: React.ChangeEvent<HTMLInputElement>) => {
+  handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const q = event.target.value;
+
     if (q.length < 3) {
       this.clearResults(q);
       return;
@@ -110,10 +113,14 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
       term: q,
     });

-    this.props.search.search(event.target.value).then(res => {
+    this.search(q);
+  };
+
+  search(q) {
+    this.props.search.search(q).then(res => {
       this.setResults(res, q);
     });
-  };
+  }

   render() {
     const { activeItemIdx } = this.state;
@@ -133,7 +140,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
           onKeyDown={this.handleKeyDown}
           placeholder="Search..."
           type="text"
-          onChange={this.search}
+          onChange={this.handleChange}
         />
         {results.length > 0 && (
           <PerfectScrollbarWrap

[jk-skim]

Thanks, strbean. I might try that.