From 17216826227b956d7e98e2517fa8fe70060376db Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Tue, 10 Nov 2020 16:09:44 +0300 Subject: [PATCH] Added debouncing for search field --- cvat-ui/package-lock.json | 37 +++++++++++-------- cvat-ui/package.json | 2 + .../components/task-page/user-selector.tsx | 32 +++++++++++----- 3 files changed, 45 insertions(+), 26 deletions(-) diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index 37f82cf9..1d67a279 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -1179,6 +1179,11 @@ "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", "dev": true }, + "@types/lodash": { + "version": "4.14.165", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.165.tgz", + "integrity": "sha512-tjSSOTHhI5mCHTy/OOXYIhi2Wt1qcbHmuXD1Ha7q70CgI/I71afO4XtLb/cVexki1oVYchpul/TOuu3Arcdxrg==" + }, "@types/minimatch": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", @@ -17048,7 +17053,7 @@ }, "fs-minipass": { "version": "1.2.7", - "resolved": false, + "resolved": "", "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==", "optional": true, "requires": { @@ -17063,7 +17068,7 @@ }, "gauge": { "version": "2.7.4", - "resolved": false, + "resolved": "", "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "optional": true, "requires": { @@ -17079,7 +17084,7 @@ }, "glob": { "version": "7.1.6", - "resolved": false, + "resolved": "", "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", "optional": true, "requires": { @@ -17117,7 +17122,7 @@ }, "inflight": { "version": "1.0.6", - "resolved": false, + "resolved": "", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "optional": true, "requires": { @@ -17169,7 +17174,7 @@ }, "minipass": { "version": "2.9.0", - "resolved": false, + "resolved": "", "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==", "optional": true, "requires": { @@ -17179,7 +17184,7 @@ }, "minizlib": { "version": "1.3.3", - "resolved": false, + "resolved": "", "integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==", "optional": true, "requires": { @@ -17214,7 +17219,7 @@ }, "node-pre-gyp": { "version": "0.14.0", - "resolved": false, + "resolved": "", "integrity": "sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==", "optional": true, "requires": { @@ -17268,7 +17273,7 @@ }, "npmlog": { "version": "4.1.2", - "resolved": false, + "resolved": "", "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "optional": true, "requires": { @@ -17292,7 +17297,7 @@ }, "once": { "version": "1.4.0", - "resolved": false, + "resolved": "", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "optional": true, "requires": { @@ -17362,7 +17367,7 @@ }, "rimraf": { "version": "2.7.1", - "resolved": false, + "resolved": "", "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", "optional": true, "requires": { @@ -17442,7 +17447,7 @@ }, "tar": { "version": "4.4.13", - "resolved": false, + "resolved": "", "integrity": "sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==", "optional": true, "requires": { @@ -17472,13 +17477,13 @@ }, "wrappy": { "version": "1.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "optional": true }, "yallist": { "version": "3.1.1", - "resolved": false, + "resolved": "", "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "optional": true } @@ -25950,9 +25955,9 @@ } }, "lodash": { - "version": "4.17.19", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz", - "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==" + "version": "4.17.20", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", + "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==" }, "lodash._reinterpolate": { "version": "3.0.0", diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 1fd71828..f07fbf3d 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -47,6 +47,7 @@ "worker-loader": "^2.0.0" }, "dependencies": { + "@types/lodash": "^4.14.165", "@types/platform": "^1.3.3", "@types/react": "^16.9.51", "@types/react-color": "^3.0.4", @@ -62,6 +63,7 @@ "cvat-core": "file:../cvat-core", "dotenv-webpack": "^1.8.0", "error-stack-parser": "^2.0.6", + "lodash": "^4.17.20", "moment": "^2.29.1", "platform": "^1.3.6", "prop-types": "^15.7.2", diff --git a/cvat-ui/src/components/task-page/user-selector.tsx b/cvat-ui/src/components/task-page/user-selector.tsx index b9b10c18..382fffa0 100644 --- a/cvat-ui/src/components/task-page/user-selector.tsx +++ b/cvat-ui/src/components/task-page/user-selector.tsx @@ -8,6 +8,8 @@ import Autocomplete from 'antd/lib/auto-complete'; import getCore from 'cvat-core-wrapper'; import { SelectValue } from 'antd/lib/select'; +import debounce from 'lodash/debounce'; + const core = getCore(); export interface User { @@ -20,6 +22,25 @@ interface Props { onSelect: (user: User | null) => void; } +const searchUsers = debounce( + (searchValue: string, setUsers: (users: User[]) => void): void => { + core.users + .get({ + search: searchValue, + limit: 10, + }) + .then((result: User[]) => { + if (result) { + setUsers(result); + } + }); + }, + 250, + { + maxWait: 750, + }, +); + export default function UserSelector(props: Props): JSX.Element { const { value, onSelect } = props; const [searchPhrase, setSearchPhrase] = useState(''); @@ -28,16 +49,7 @@ export default function UserSelector(props: Props): JSX.Element { const handleSearch = (searchValue: string): void => { if (searchValue) { - core.users - .get({ - search: searchValue, - limit: 10, - }) - .then((result: User[]) => { - if (result) { - setUsers(result); - } - }); + searchUsers(searchValue, setUsers); } else { setUsers([]); }