From 3fdec9f09f044efd33045a8df3f510aeec907e5e Mon Sep 17 00:00:00 2001
From: lian <imwhatiam123@gmail.com>
Date: Wed, 22 Mar 2023 15:21:51 +0800
Subject: [PATCH] send search user request after one second (#5411)

* send search user request after one second

* [user select] cleaned up code & improvement

---------

Co-authored-by: llj <lingjun.li1@gmail.com>
---
 frontend/src/components/user-select.js | 64 ++++++++++++++------------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/user-select.js b/frontend/src/components/user-select.js
index e295b28c96..8b712e0f42 100644
--- a/frontend/src/components/user-select.js
+++ b/frontend/src/components/user-select.js
@@ -21,8 +21,9 @@ class UserSelect extends React.Component {
   constructor(props) {
     super(props);
     this.options = [];
+    this.finalValue = '';
     this.state = {
-      searchValue: '',
+      searchValue: ''
     };
   }
 
@@ -37,36 +38,39 @@ class UserSelect extends React.Component {
 
   loadOptions = (input, callback) => {
     const value = input.trim();
-    if (value.length > 0) {
-      seafileAPI.searchUsers(value).then((res) => {
-        this.options = [];
-        for (let i = 0 ; i < res.data.users.length; i++) {
-          const item = res.data.users[i];
-          let obj = {};
-          obj.value = item.name;
-          obj.email = item.email;
-          obj.label =
-              enableShowContactEmailWhenSearchUser ? (
-                <div className="d-flex">
-                  <img src={item.avatar_url} className="avatar" width="24" alt="" />
-                  <div className="ml-2">
-                    <span className="user-option-name">{item.name}</span><br />
-                    <span className="user-option-email">{item.contact_email}</span>
-                  </div>
+    this.finalValue = value;
+    setTimeout(() => {
+      if (this.finalValue === value && value.length > 0) {
+        seafileAPI.searchUsers(value).then((res) => {
+          this.options = [];
+          for (let i = 0 ; i < res.data.users.length; i++) {
+            const item = res.data.users[i];
+            let obj = {};
+            obj.value = item.name;
+            obj.email = item.email;
+            obj.label = enableShowContactEmailWhenSearchUser ? (
+              <div className="d-flex">
+                <img src={item.avatar_url} className="avatar" width="24" alt="" />
+                <div className="ml-2">
+                  <span className="user-option-name">{item.name}</span><br />
+                  <span className="user-option-email">{item.contact_email}</span>
                 </div>
-              ) : (
-                <React.Fragment>
-                  <img src={item.avatar_url} className="select-module select-module-icon avatar" alt=""/>
-                  <span className='select-module select-module-name'>{item.name}</span>
-                </React.Fragment>);
-          this.options.push(obj);
-        }
-        callback(this.options);
-      }).catch(error => {
-        let errMessage = Utils.getErrorMsg(error);
-        toaster.danger(errMessage);
-      });
-    }
+              </div>
+            ) : (
+              <React.Fragment>
+                <img src={item.avatar_url} className="select-module select-module-icon avatar" alt=""/>
+                <span className='select-module select-module-name'>{item.name}</span>
+              </React.Fragment>
+            );
+            this.options.push(obj);
+          }
+          callback(this.options);
+        }).catch(error => {
+          let errMessage = Utils.getErrorMsg(error);
+          toaster.danger(errMessage);
+        });
+      }
+    }, 1000);
   }
 
   clearSelect = () => {