From 5aaf0c4f2952bf783a52b936628cd4b419fd4449 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20B=C3=BCchele?= <danielbuechele@fb.com>
Date: Mon, 17 Jun 2019 09:55:30 -0700
Subject: [PATCH] debounce search

Summary:
Debouncing search to prevent triggering multiple searches, while typing.
Now, a search is only triggered, when the input hasn't changed for more than 200ms.
This affects all SearchableTables.

Reviewed By: passy

Differential Revision: D15855343

fbshipit-source-id: 261cf601249ac604c865ae10deb25d5c836f964a
---
 src/ui/components/searchable/Searchable.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/ui/components/searchable/Searchable.js b/src/ui/components/searchable/Searchable.js
index bc82c4fe3..555804384 100644
--- a/src/ui/components/searchable/Searchable.js
+++ b/src/ui/components/searchable/Searchable.js
@@ -17,6 +17,7 @@ import FlexBox from '../FlexBox.js';
 import Glyph from '../Glyph.js';
 import FilterToken from './FilterToken.js';
 import styled from '../../styled/index.js';
+import debounce from 'lodash.debounce';
 
 const SearchBar = styled(Toolbar)({
   height: 42,
@@ -250,10 +251,12 @@ const Searchable = (
       }
     };
 
-    onChangeSearchTerm = (e: SyntheticInputEvent<HTMLInputElement>) =>
+    onChangeSearchTerm = (e: SyntheticInputEvent<HTMLInputElement>) => {
+      this.setState({searchTerm: e.target.value});
       this.matchTags(e.target.value, false);
+    };
 
-    matchTags = (searchTerm: string, matchEnd: boolean) => {
+    matchTags = debounce((searchTerm: string, matchEnd: boolean) => {
       const filterPattern = matchEnd
         ? /([a-z][a-z0-9]*[!]?[:=][^\s]+)($|\s)/gi
         : /([a-z][a-z0-9]*[!]?[:=][^\s]+)\s/gi;
@@ -284,8 +287,7 @@ const Searchable = (
 
         searchTerm = searchTerm.replace(filterPattern, '');
       }
-      this.setState({searchTerm});
-    };
+    }, 200);
 
     setInputRef = (ref: ?HTMLInputElement) => {
       this._inputRef = ref;