diff --git a/web/components/filter-select-users.tsx b/web/components/filter-select-users.tsx index 780df60a..a70e3680 100644 --- a/web/components/filter-select-users.tsx +++ b/web/components/filter-select-users.tsx @@ -6,6 +6,7 @@ import clsx from 'clsx' import { Menu, Transition } from '@headlessui/react' import { Avatar } from 'web/components/avatar' import { Row } from 'web/components/layout/row' +import { debounce } from 'lodash' export function FilterSelectUsers(props: { setSelectedUsers: (users: User[]) => void @@ -26,6 +27,8 @@ export function FilterSelectUsers(props: { user.name.toLowerCase().includes(query.toLowerCase()) ) }) + const debouncedQuery = debounce(setQuery, 50) + return ( <div> <div className="relative mt-1 rounded-md"> @@ -37,7 +40,7 @@ export function FilterSelectUsers(props: { name="user name" id="user name" value={query} - onChange={(e) => setQuery(e.target.value)} + onChange={(e) => debouncedQuery(e.target.value)} className="input input-bordered block w-full pl-10 focus:border-gray-300 " placeholder="Austin Chen" />