Debounce validations to prevent input lag

package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@phosphor-icons/react": "^2.1.7",
+    "@types/lodash": "^4.17.14",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.2",
@@ -31,6 +32,7 @@
     "formik-antd": "^3.0.0-beta.9",
     "highcharts": "^11.4.8",
     "highcharts-react-official": "^3.2.1",
+    "lodash": "^4.17.21",
     "package-lock.json": "^1.0.0",
     "postcss": "^8.4.47",
     "react": "^18.3.1",

src/components/filterform/FiltersForm.tsx

@@ -11,6 +11,8 @@ import {
   isValidFilter,
   validateFilterField,
 } from './filterHelpers'
+import { debounce } from 'lodash'
+import { useEffect } from 'react'
 
 type Props = {
   filterConfigs: FilterConfig[]
@@ -56,6 +58,7 @@ export const FiltersForm = ({
           },
         ])
       }}
+      validateOnChange={false}
       validate={(values) => {
         if (values.filters.every((filter) => isEmptyFilter(filter))) {
           return
@@ -94,7 +97,13 @@ type FilterFormFieldsProps = {
 }
 
 const FilterFormFields = ({ filterConfigs }: FilterFormFieldsProps) => {
-  const { values, resetForm } = useFormikContext<FilterForm>()
+  const { values, resetForm, validateForm } = useFormikContext<FilterForm>()
+
+  const debouncedValidateForm = debounce(validateForm, 1000)
+
+  useEffect(() => {
+    debouncedValidateForm()
+  }, [values])
 
   return (
     <div>