fix: Issue on server side filtering. It runs into an infinite loop

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);

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