feat: try calling onchange in the filterinput component

src/app/(private)/roles/page.tsx

@@ -152,7 +152,7 @@ const Page = (): JSX.Element => {
           id="name"
           label={t('name')}
           value={filters.name}
-          onChange={(e) => handleFilterChange('name', e.target.value)}
+          onChange={(value) => handleFilterChange('name', value)}
         />
       </div>
       <DataTable

src/components/ui/filter-input.tsx

@@ -1,12 +1,14 @@
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { cn } from '@/lib/utils'
+import { debounce } from 'lodash'
+import { useMemo, useState } from 'react'
 
 interface FilterInputProps {
   id: string
   label: string
   value: string | number | undefined
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onChange: (value: string) => void
   placeholder?: string
   type?: string
 }
@@ -19,16 +21,26 @@ const FilterInput: React.FC<FilterInputProps> = ({
   placeholder = '',
   type = 'text',
 }) => {
+  const [localValue, setLocalValue] = useState(value ?? '')
+
+  // Debounce the onChange callback to minimize frequent calls
+  const debouncedChange = useMemo(
+    () => debounce((newValue: string) => onChange(newValue), 300),
+    [onChange]
+  )
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onChange(e)
+    const newValue = e.target.value
+    setLocalValue(newValue) // Update the local state immediately for user feedback
+    debouncedChange(newValue) // Call the debounced onChange function
   }
 
   return (
     <div className="relative">
       <Input
         id={id}
         placeholder={placeholder}
-        value={value ?? ''}
+        value={localValue}
         onChange={handleChange}
         type={type}
         className={cn(