Added debouncing for search field

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",

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",

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([]);
         }