@@ -2,7 +2,7 @@ import Column from "antd/es/table/Column";
22import OrgApi from "api/orgApi" ;
33import { GroupUser , MEMBER_ROLE , OrgUser } from "constants/orgConstants" ;
44import { CheckBox , CustomModal , Search } from "lowcoder-design" ;
5- import { CSSProperties , ReactNode , useEffect , useRef , useState } from "react" ;
5+ import { CSSProperties , ReactNode , useEffect , useRef , useState , useCallback } from "react" ;
66import { connect , useDispatch } from "react-redux" ;
77import { AppState } from "redux/reducers" ;
88import { fetchGroupUsersAction ,
@@ -17,6 +17,7 @@ import { isGroupAdmin } from "util/permissionUtils";
1717import { SuperUserIcon } from "lowcoder-design" ;
1818import { EmptyContent } from "pages/common/styledComponent" ;
1919import { trans } from "i18n" ;
20+ import { debounce } from "lodash" ;
2021
2122const TableWrapper = styled . div `
2223 margin-right: -16px;
@@ -46,14 +47,21 @@ function AddGroupUserDialog(props: {
4647const [ searchValue , setSearchValue ] = useState ( "" )
4748const dispatch = useDispatch ( ) ;
4849
50+ const debouncedFetchPotentialMembers = useCallback (
51+ debounce ( ( searchVal :string ) => {
52+ dispatch ( fetchGroupPotentialMembersAction ( searchVal , groupId ) ) ;
53+ } , 500 ) ,
54+ [ dispatch , groupId ]
55+ ) ;
56+
4957useEffect ( ( ) => {
50- const timer = setTimeout ( ( ) => {
51- if ( searchValue . length > 2 || searchValue === "" )
52- dispatch ( fetchGroupPotentialMembersAction ( searchValue , groupId ) ) ;
53- return
54- } , 500 ) ;
55- return ( ) => clearTimeout ( timer ) ;
56- } , [ searchValue ] )
58+ if ( searchValue . length > 2 || searchValue === "" ) {
59+ debouncedFetchPotentialMembers ( searchValue ) ;
60+ }
61+ return ( ) => {
62+ debouncedFetchPotentialMembers . cancel ( ) ;
63+ } ;
64+ } , [ searchValue , debouncedFetchPotentialMembers ] ) ;
5765
5866useEffect ( ( ) => {
5967if ( dialogVisible ) {