diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/Filter/Filter.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/Filter/Filter.jsx index d367419c31..905142fc59 100644 --- a/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/Filter/Filter.jsx +++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/_components/Filter/Filter.jsx @@ -4,6 +4,7 @@ import { deepClone } from '@/_helpers/utilities/utils.helpers'; import { FilterRow } from './FilterRow'; import { FilterFooter } from './FilterFooter'; import { FilterHeader } from './FilterHeader'; +import { debounce, isEqual } from 'lodash'; export const Filter = memo(({ table, darkMode, setFilters, setShowFilter }) => { const { t } = useTranslation(); @@ -98,18 +99,36 @@ export const Filter = memo(({ table, darkMode, setFilters, setShowFilter }) => { applyFilters(newFilters.filter((filter) => filter.id !== '')); }; + const debouncedApplyFilters = useMemo( + () => + debounce((filters) => { + const currentTableFilters = table.getState().columnFilters; + if (!isEqual(filters, currentTableFilters)) { + setFilters( + filters.map((filter) => ({ + id: filter.id, + value: filter.value, + })) + ); + } + }, 500), + [setFilters, table] + ); + const applyFilters = useCallback( (filters) => { - setFilters( - filters.map((filter) => ({ - id: filter.id, - value: filter.value, - })) - ); + debouncedApplyFilters(filters); }, - [setFilters] + [debouncedApplyFilters] ); + // Cleanup debounce on unmount + useEffect(() => { + return () => { + debouncedApplyFilters.cancel(); + }; + }, [debouncedApplyFilters]); + useEffect(() => { if (localFilters.length > 0) { const tableFilters = deepClone(localFilters); diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx index 25b24991ca..6ec4f66994 100644 --- a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx +++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableExposedVariables/TableExposedVariables.jsx @@ -179,9 +179,7 @@ export const TableExposedVariables = ({ // Expose applied filters useEffect(() => { setExposedVariables({ filters: appliedFilters.map((filter) => filter.value) }); - if (appliedFilters.length > 0) { - mounted && fireEvent('onFilterChanged'); - } + mounted && fireEvent('onFilterChanged'); // eslint-disable-next-line react-hooks/exhaustive-deps }, [appliedFilters, setExposedVariables, fireEvent]); // Didn't add mounted as it's not a dependency