diff --git a/ee/client/omnichannel/units/UnitEdit.js b/ee/client/omnichannel/units/UnitEdit.js index 7ae711fc32e33..e20970d630366 100644 --- a/ee/client/omnichannel/units/UnitEdit.js +++ b/ee/client/omnichannel/units/UnitEdit.js @@ -7,7 +7,7 @@ import { Select, Margins, } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useMutableCallback, useDebouncedValue } from '@rocket.chat/fuselage-hooks'; import React, { useMemo, useState } from 'react'; import VerticalBar from '../../../../client/components/VerticalBar'; @@ -25,10 +25,15 @@ function UnitEdit({ data, unitId, isNew, unitMonitors, unitDepartments, reload, const t = useTranslation(); const unitsRoute = useRoute('omnichannel-units'); const [monitorsFilter, setMonitorsFilter] = useState(''); + + const debouncedMonitorsFilter = useDebouncedValue(monitorsFilter, 500); + const [departmentsFilter, setDepartmentsFilter] = useState(''); + const debouncedDepartmentsFilter = useDebouncedValue(departmentsFilter, 500); + const { itemsList: monitorsList, loadMoreItems: loadMoreMonitors } = useMonitorsList( - useMemo(() => ({ filter: monitorsFilter }), [monitorsFilter]), + useMemo(() => ({ filter: debouncedMonitorsFilter }), [debouncedMonitorsFilter]), ); const { phase: monitorsPhase, items: monitorsItems, itemCount: monitorsTotal } = useRecordList( @@ -36,7 +41,10 @@ function UnitEdit({ data, unitId, isNew, unitMonitors, unitDepartments, reload, ); const { itemsList: departmentsList, loadMoreItems: loadMoreDepartments } = useDepartmentsList( - useMemo(() => ({ filter: departmentsFilter, unitId }), [departmentsFilter, unitId]), + useMemo(() => ({ filter: debouncedDepartmentsFilter, unitId }), [ + debouncedDepartmentsFilter, + unitId, + ]), ); const { @@ -173,7 +181,7 @@ function UnitEdit({ data, unitId, isNew, unitMonitors, unitDepartments, reload, {t('Departments')}* {t('Monitors')}*