From 2f175eacf585ec0626fb03c09328b1f42bd25881 Mon Sep 17 00:00:00 2001
From: Nafees Nazik <84864519+G3root@users.noreply.github.com>
Date: Fri, 5 May 2023 16:34:58 +0530
Subject: [PATCH] fix: load date picker on client side (#8690)

---
 packages/features/bookings/Booker/Booker.tsx          |  4 +++-
 .../bookings/Booker/components/DatePicker.tsx         | 11 -----------
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index 341432616e..05ec5d471a 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -15,7 +15,6 @@ import { AvailableTimeSlots } from "./components/AvailableTimeSlots";
 import { Away } from "./components/Away";
 import { BookEventForm } from "./components/BookEventForm";
 import { BookFormAsModal } from "./components/BookEventForm/BookFormAsModal";
-import { DatePicker } from "./components/DatePicker";
 import { EventMeta } from "./components/EventMeta";
 import { LargeCalendar } from "./components/LargeCalendar";
 import { LargeViewHeader } from "./components/LargeViewHeader";
@@ -26,6 +25,9 @@ import type { BookerLayout, BookerProps } from "./types";
 import { useEvent } from "./utils/event";
 
 const PoweredBy = dynamic(() => import("@calcom/ee/components/PoweredBy"));
+const DatePicker = dynamic(() => import("./components/DatePicker").then((mod) => mod.DatePicker), {
+  ssr: false,
+});
 
 const useBrandColors = ({ brandColor, darkBrandColor }: { brandColor?: string; darkBrandColor?: string }) => {
   const brandTheme = useGetBrandingColours({
diff --git a/packages/features/bookings/Booker/components/DatePicker.tsx b/packages/features/bookings/Booker/components/DatePicker.tsx
index a61c15142e..10ec92c909 100644
--- a/packages/features/bookings/Booker/components/DatePicker.tsx
+++ b/packages/features/bookings/Booker/components/DatePicker.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useState } from "react";
 import { shallow } from "zustand/shallow";
 
 import type { Dayjs } from "@calcom/dayjs";
@@ -12,7 +11,6 @@ import { useBookerStore } from "../store";
 import { useEvent, useScheduleForEvent } from "../utils/event";
 
 export const DatePicker = () => {
-  const [isLoadedClientSide, setIsLoadedClientSide] = useState(false);
   const { i18n } = useLocale();
   const [month, selectedDate] = useBookerStore((state) => [state.month, state.selectedDate], shallow);
   const [setSelectedDate, setMonth] = useBookerStore(
@@ -23,15 +21,6 @@ export const DatePicker = () => {
   const schedule = useScheduleForEvent();
   const nonEmptyScheduleDays = useNonEmptyScheduleDays(schedule?.data?.slots);
 
-  // Not rendering the component on the server side to avoid hydration issues
-  // @TODO: We should update the datepicker component as soon as the current booker isn't
-  // used anymore, so we don't need to have this check.
-  useEffect(() => {
-    setIsLoadedClientSide(true);
-  }, []);
-
-  if (!isLoadedClientSide) return null;
-
   return (
     <DatePickerComponent
       isLoading={schedule.isLoading}