[FIX] Add debouncing to add users search field. (#20297)

Co-authored-by: Douglas Fabris <deefabris@gmail.com>

ee/client/audit/UserAutoCompleteMultiple.js

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { AutoComplete, Box, Option, Options, Chip } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useMutableCallback, useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 
 import UserAvatar from '../../../client/components/avatar/UserAvatar';
 import { useEndpointData } from '../../../client/hooks/useEndpointData';
@@ -11,7 +11,8 @@ const Avatar = ({ value, ...props }) => <UserAvatar size={Options.AvatarSize} us
 
 const UserAutoCompleteMultiple = React.memo((props) => {
 	const [filter, setFilter] = useState('');
-	const { value: data } = useEndpointData('users.autocomplete', useMemo(() => query(filter), [filter]));
+	const debouncedFilter = useDebouncedValue(filter, 1000);
+	const { value: data } = useEndpointData('users.autocomplete', useMemo(() => query(debouncedFilter), [debouncedFilter]));
 	const options = useMemo(() => (data && data.items.map((user) => ({ value: user.username, label: user.name }))) || [], [data]);
 	const onClickRemove = useMutableCallback((e) => {
 		e.stopPropagation();