From 373f018d0c183f83d07a4dbad4a4e2c9ab159f69 Mon Sep 17 00:00:00 2001
From: Faheem Abrar <faheem.abrar@outlook.com>
Date: Mon, 16 Mar 2020 10:01:21 -0400
Subject: [PATCH] fix: Add debounce for 300 ms when searching (#1089)

Co-authored-by: Roman Hotsiy <gotsijroman@gmail.com>
---
 e2e/integration/search.e2e.ts          |  2 ++
 src/components/SearchBox/SearchBox.tsx | 23 +++++++++++++++--------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/e2e/integration/search.e2e.ts b/e2e/integration/search.e2e.ts
index e4ffd5ab..a44cafb7 100644
--- a/e2e/integration/search.e2e.ts
+++ b/e2e/integration/search.e2e.ts
@@ -27,6 +27,8 @@ describe('Search', () => {
   it('should support arrow navigation', () => {
     getSearchInput().type('int', { force: true });
 
+    cy.wait(500);
+
     getSearchInput().type('{downarrow}', { force: true });
     getResult(0).should('have.class', 'active');
 
diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx
index e6ade2c3..5476dc9b 100644
--- a/src/components/SearchBox/SearchBox.tsx
+++ b/src/components/SearchBox/SearchBox.tsx
@@ -7,6 +7,7 @@ import { MenuItem } from '../SideMenu/MenuItem';
 import { MarkerService } from '../../services/MarkerService';
 import { SearchResult } from '../../services/SearchWorker.worker';
 
+import { bind, debounce } from 'decko';
 import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar';
 import {
   ClearIcon,
@@ -94,11 +95,18 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
   setResults(results: SearchResult[], term: string) {
     this.setState({
       results,
-      term,
     });
     this.props.marker.mark(term);
   }
 
+  @bind
+  @debounce(400)
+  searchCallback(searchTerm: string) {
+    this.props.search.search(searchTerm).then(res => {
+      this.setResults(res, searchTerm);
+    });
+  }
+
   search = (event: React.ChangeEvent<HTMLInputElement>) => {
     const q = event.target.value;
     if (q.length < 3) {
@@ -106,13 +114,12 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
       return;
     }
 
-    this.setState({
-      term: q,
-    });
-
-    this.props.search.search(event.target.value).then(res => {
-      this.setResults(res, q);
-    });
+    this.setState(
+      {
+        term: q,
+      },
+      () => this.searchCallback(this.state.term),
+    );
   };
 
   render() {