fix: multiple getSchedule requests on email change in booker (#15616)

* fix: multiple getSchedule requests on email change in booker

* fix: use debounce for formEmail

---------

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Amit Sharma <74371312+Amit91848@users.noreply.github.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>

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,