Dashboard: debounce search input (codesandbox#4021)

Author: siddharthkp

packages/app/package.json

@@ -223,6 +223,7 @@
     "svg-react-loader": "^0.4.4",
     "tern": "^0.21.0",
     "textextensions": "^3.3.0",
+    "use-debounce": "^3.4.2",
     "use-interval": "^1.2.1",
     "util": "0.11.1",
     "vue": "^2.5.2",

packages/app/src/app/pages/NewDashboard/Header/index.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
 import { useOvermind } from 'app/overmind';
 import { UserMenu } from 'app/pages/common/UserMenu';
 import {
@@ -12,22 +13,21 @@ import css from '@styled-system/css';
 import { withRouter } from 'react-router-dom';
 
 export const HeaderComponent = ({ history }) => {
-  const [value, setValue] = useState();
+  const [value, setValue] = useState('');
   const {
     actions: { modalOpened },
   } = useOvermind();
 
   const searchQuery = new URLSearchParams(window.location.search).get('query');
 
-  const onChange = e => {
+  const search = query => history.push(`/new-dashboard/search?query=${query}`);
+  const [debouncedSearch] = useDebouncedCallback(search, 250);
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setValue(e.target.value);
-    if (!e.target.value) {
-      history.push(`/new-dashboard/all`);
-    }
 
-    if (e.target.value.length >= 2) {
-      history.push(`/new-dashboard/search?query=${e.target.value}`);
-    }
+    if (!e.target.value) history.push(`/new-dashboard/all`);
+    if (e.target.value.length >= 2) debouncedSearch(e.target.value);
   };
 
   return (
@@ -48,14 +48,9 @@ export const HeaderComponent = ({ history }) => {
     >
       <IconButton name="menu" size={18} title="Menu" />
       <Input
+        type="text"
         value={value || searchQuery || ''}
         onChange={onChange}
-        onKeyDown={e => {
-          if (e.key === 'Enter' && value) {
-            history.push(`/new-dashboard/search?query=${e.target.value}`);
-          }
-        }}
-        type="text"
         placeholder="Search all sandboxes"
         css={css({ maxWidth: 480, display: ['none', 'none', 'block'] })}
       />

yarn.lock

@@ -30758,6 +30758,11 @@ use-callback-ref@^1.2.1:
   resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.3.tgz#9f939dfb5740807bbf9dd79cdd4e99d27e827756"
   integrity sha512-DPBPh1i2adCZoIArRlTuKRy7yue7QogtEnfv0AKrWsY+GA+4EKe37zhRDouNnyWMoNQFYZZRF+2dLHsWE4YvJA==
 
+use-debounce@^3.4.2:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-3.4.2.tgz#f4333cca59504244b916159600427bf977ec4c46"
+  integrity sha512-rW44wZaFPh3XiwUzGBA0JRuklpbfKO/szU/5CYD2Q/erLmCem63lJ650p3a+NJE6S+g0rulKtBOfa/3rw/GN+Q==
+
 use-interval@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/use-interval/-/use-interval-1.2.1.tgz#ec4aaa869888bcf491edcc1f001eb631db908597"