[6.x] Add debounce to visualize search filter so we don't send a requ…

…est on every character press (#15039)

* Fixes #14908 (#15003)

* Cancel debounce when component unmounts

* remove trailing whitespace

* Remove more trailing whitespace

src/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import _ from 'lodash';
 
 import { SortableProperties } from 'ui_framework/services';
 import { Pager } from 'ui/pager';
@@ -48,6 +49,23 @@ export class VisualizeListingTable extends Component {
     );
     this.items = [];
     this.pager = new Pager(this.items.length, 20, 1);
+
+    this.debouncedFetch = _.debounce(filter => {
+      this.props.fetchItems(filter)
+        .then(items => {
+          this.setState({
+            isFetchingItems: false,
+            selectedRowIds: [],
+            filter,
+          });
+          this.items = items;
+          this.calculateItemsOnPage();
+        });
+    }, 200);
+  }
+
+  componentWillUnmount() {
+    this.debouncedFetch.cancel();
   }
 
   calculateItemsOnPage = () => {
@@ -75,18 +93,8 @@ export class VisualizeListingTable extends Component {
   };
 
   fetchItems = (filter) => {
-    this.setState({ isFetchingItems: true });
-
-    this.props.fetchItems(filter)
-      .then(items => {
-        this.setState({
-          isFetchingItems: false,
-          selectedRowIds: [],
-          filter,
-        });
-        this.items = items;
-        this.calculateItemsOnPage();
-      });
+    this.setState({ isFetchingItems: true, filter });
+    this.debouncedFetch(filter);
   };
 
   componentDidMount() {