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')}*