Merge pull request #19 from Visual-Regression-Tracker/42-filter-debounce

42 filter debounce

Author: pashidlos

package-lock.json

@@ -12,6 +12,7 @@
     "konva": "^4.2.2",
     "qs": "^6.9.4",
     "react": "^16.13.1",
+    "react-debounce-input": "^3.2.2",
     "react-dom": "^16.13.1",
     "react-konva": "^16.13.0-0",
     "react-router-dom": "^5.1.2",

package.json

@@ -9,6 +9,7 @@ import {
   Button,
 } from "@material-ui/core";
 import { TestRun, TestVariation } from "../types";
+import { DebounceInput } from "react-debounce-input";
 
 interface IProps {
   items: (TestRun | TestVariation)[];
@@ -64,10 +65,13 @@ const Filters: React.FunctionComponent<IProps> = ({
     <React.Fragment>
       <Grid container spacing={2} alignItems="flex-end">
         <Grid item xs>
-          <TextField
+          <DebounceInput
             fullWidth
             label="Name"
             value={query}
+            element={TextField}
+            minLength={2}
+            debounceTimeout={300}
             onChange={(event) => setQuery(event?.target.value)}
           />
         </Grid>

src/components/Filters.tsx

@@ -7,7 +7,7 @@ export const SkeletonList: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {list.map((i) => (
-        <Box p={0.5} key={i}>
+        <Box p={0.2} key={i}>
           <Skeleton variant="rect" height={80} />
         </Box>
       ))}