Debounce startTime and endTime in date range picker (#2801)

* debounce startTime and endTime in date range picker

* the linter is wise

Author: david-crespo

app/components/form/fields/DateTimeRangePicker.tsx

@@ -7,6 +7,7 @@
  */
 import { getLocalTimeZone, now as getNow, type DateValue } from '@internationalized/date'
 import { useMemo, useState } from 'react'
+import { useDebounce } from 'use-debounce'
 
 import { DateRangePicker } from '~/ui/lib/DateRangePicker'
 import { Listbox } from '~/ui/lib/Listbox'
@@ -33,6 +34,8 @@ const computeStart: Record<RangeKey, (now: DateValue) => DateValue> = {
   last30Days: (now) => now.subtract({ days: 30 }),
 }
 
+const tz = getLocalTimeZone()
+
 // Limitations:
 //   - list of presets is hard-coded
 //   - initial preset can't be "custom"
@@ -54,7 +57,7 @@ export function useDateTimeRangePicker({
   maxValue?: DateValue | undefined
   items?: { label: string; value: RangeKeyAll }[]
 }) {
-  const now = useMemo(() => getNow(getLocalTimeZone()), [])
+  const now = useMemo(() => getNow(tz), [])
 
   const start = computeStart[initialPreset](now)
   const end = now
@@ -64,7 +67,7 @@ export function useDateTimeRangePicker({
 
   const onRangeChange = (newPreset: RangeKeyAll) => {
     if (newPreset !== 'custom') {
-      const now = getNow(getLocalTimeZone())
+      const now = getNow(tz)
       const newStartTime = computeStart[newPreset](now)
       setRange({ start: newStartTime, end: now })
     }
@@ -81,10 +84,13 @@ export function useDateTimeRangePicker({
     items,
   }
 
+  const [startTime] = useDebounce(range.start.toDate(tz), 400)
+  const [endTime] = useDebounce(range.end.toDate(tz), 400)
+
   return {
-    startTime: range.start.toDate(getLocalTimeZone()),
-    endTime: range.end.toDate(getLocalTimeZone()),
-    preset: preset,
+    startTime,
+    endTime,
+    preset,
     onRangeChange: onRangeChange,
     dateTimeRangePicker: <DateTimeRangePicker {...props} />,
   }

package-lock.json

@@ -71,6 +71,7 @@
     "ts-pattern": "^5.6.2",
     "tslib": "^2.7.0",
     "tunnel-rat": "^0.1.2",
+    "use-debounce": "^10.0.4",
     "uuid": "^10.0.0",
     "zod": "^3.23.8",
     "zustand": "^5.0.3"