diff --git a/packages/platform/atoms/booker/BookerWebWrapper.tsx b/packages/platform/atoms/booker/BookerWebWrapper.tsx index 68727a3b78..b32ff954cd 100644 --- a/packages/platform/atoms/booker/BookerWebWrapper.tsx +++ b/packages/platform/atoms/booker/BookerWebWrapper.tsx @@ -19,6 +19,7 @@ import { useBookerStore, useInitializeBookerStore } from "@calcom/features/booki import { useEvent, useScheduleForEvent } from "@calcom/features/bookings/Booker/utils/event"; import { useBrandColors } from "@calcom/features/bookings/Booker/utils/use-brand-colors"; import { DEFAULT_LIGHT_BRAND_COLOR, DEFAULT_DARK_BRAND_COLOR } from "@calcom/lib/constants"; +import { useDebounce } from "@calcom/lib/hooks/useDebounce"; import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery"; import { BookerLayouts } from "@calcom/prisma/zod-utils"; @@ -116,6 +117,7 @@ export const BookerWebWrapper = (props: BookerWebWrapperAtomProps) => { * Prioritize dateSchedule load * Component will render but use data already fetched from here, and no duplicate requests will be made * */ + const debouncedFormEmail = useDebounce(bookerForm.formEmail, 600); const schedule = useScheduleForEvent({ prefetchNextMonth, username: props.username, @@ -125,7 +127,7 @@ export const BookerWebWrapper = (props: BookerWebWrapperAtomProps) => { month: props.month, duration: props.duration, selectedDate, - bookerEmail: bookerForm.formEmail, + bookerEmail: debouncedFormEmail, }); const bookings = useBookings({ event,