From f6d0a2ca09c11f4c152f74b8242195a8d11ea37f Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Tue, 14 Jan 2025 08:36:20 -0500
Subject: [PATCH] fix: potential fix for flaky layout shift (#18651)

* potential fix: layout shift

* fix lint error
---
 apps/web/modules/team/type-view.tsx   | 73 ++++++++-------------------
 apps/web/pages/team/[slug]/[type].tsx | 39 ++++++++++++--
 2 files changed, 58 insertions(+), 54 deletions(-)

diff --git a/apps/web/modules/team/type-view.tsx b/apps/web/modules/team/type-view.tsx
index ed9ded88ab..221d697a55 100644
--- a/apps/web/modules/team/type-view.tsx
+++ b/apps/web/modules/team/type-view.tsx
@@ -4,8 +4,6 @@ import type { EmbedProps } from "app/WithEmbedSSR";
 import { useSearchParams } from "next/navigation";
 
 import { Booker } from "@calcom/atoms/monorepo";
-import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
-import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
 
 import type { getServerSideProps } from "@lib/team/[slug]/[type]/getServerSideProps";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -26,7 +24,6 @@ function Type({
   slug,
   user,
   booking,
-  isEmbed,
   isBrandingHidden,
   eventData,
   isInstantMeeting,
@@ -34,59 +31,33 @@ function Type({
   teamMemberEmail,
   crmOwnerRecordType,
   crmAppSlug,
-  isSEOIndexable,
 }: PageProps) {
   const searchParams = useSearchParams();
-  const { profile, users, hidden, title } = eventData;
 
   return (
-    <main className={getBookerWrapperClasses({ isEmbed: !!isEmbed })}>
-      <BookerSeo
-        username={user}
-        eventSlug={slug}
-        rescheduleUid={booking?.uid}
-        hideBranding={isBrandingHidden}
-        isTeamEvent
-        eventData={
-          profile && users && title && hidden !== undefined
-            ? {
-                profile,
-                users,
-                title,
-                hidden,
-              }
-            : undefined
-        }
-        entity={eventData.entity}
-        bookingData={booking}
-        isSEOIndexable={isSEOIndexable}
-      />
-      <Booker
-        username={user}
-        eventSlug={slug}
-        bookingData={booking}
-        isInstantMeeting={isInstantMeeting}
-        hideBranding={isBrandingHidden}
-        isTeamEvent
-        entity={{ ...eventData.entity, eventTypeId: eventData?.eventTypeId }}
-        durationConfig={eventData.metadata?.multipleDuration}
-        /* TODO: Currently unused, evaluate it is needed-
-         *       Possible alternative approach is to have onDurationChange.
-         */
-        duration={getMultipleDurationValue(
-          eventData.metadata?.multipleDuration,
-          searchParams?.get("duration"),
-          eventData.length
-        )}
-        orgBannerUrl={orgBannerUrl}
-        teamMemberEmail={teamMemberEmail}
-        crmOwnerRecordType={crmOwnerRecordType}
-        crmAppSlug={crmAppSlug}
-      />
-    </main>
+    <Booker
+      username={user}
+      eventSlug={slug}
+      bookingData={booking}
+      isInstantMeeting={isInstantMeeting}
+      hideBranding={isBrandingHidden}
+      isTeamEvent
+      entity={{ ...eventData.entity, eventTypeId: eventData?.eventTypeId }}
+      durationConfig={eventData.metadata?.multipleDuration}
+      /* TODO: Currently unused, evaluate it is needed-
+       *       Possible alternative approach is to have onDurationChange.
+       */
+      duration={getMultipleDurationValue(
+        eventData.metadata?.multipleDuration,
+        searchParams?.get("duration"),
+        eventData.length
+      )}
+      orgBannerUrl={orgBannerUrl}
+      teamMemberEmail={teamMemberEmail}
+      crmOwnerRecordType={crmOwnerRecordType}
+      crmAppSlug={crmAppSlug}
+    />
   );
 }
 
-Type.isBookingPage = true;
-
 export default Type;
diff --git a/apps/web/pages/team/[slug]/[type].tsx b/apps/web/pages/team/[slug]/[type].tsx
index 1138cc20a1..67f3987cac 100644
--- a/apps/web/pages/team/[slug]/[type].tsx
+++ b/apps/web/pages/team/[slug]/[type].tsx
@@ -1,10 +1,43 @@
+import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
+import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
+
 import PageWrapper from "@components/PageWrapper";
 
-import TypePage, { type PageProps } from "~/team/type-view";
+import type { PageProps } from "~/team/type-view";
+import TypePage from "~/team/type-view";
 
-const Page = (props: PageProps) => <TypePage {...props} />;
+const Page = (props: PageProps) => {
+  const { eventData, slug, user, booking, isBrandingHidden, isSEOIndexable } = props;
+  const { profile, users, hidden, title } = eventData;
 
+  return (
+    <main className={getBookerWrapperClasses({ isEmbed: !!props.isEmbed })}>
+      <BookerSeo
+        username={user}
+        eventSlug={slug}
+        rescheduleUid={booking?.uid}
+        hideBranding={isBrandingHidden}
+        isTeamEvent
+        eventData={
+          profile && users && title && hidden !== undefined
+            ? {
+                profile,
+                users,
+                title,
+                hidden,
+              }
+            : undefined
+        }
+        entity={eventData.entity}
+        bookingData={booking}
+        isSEOIndexable={isSEOIndexable}
+      />
+      <TypePage {...props} />
+    </main>
+  );
+};
+Page.isBookingPage = true;
 Page.PageWrapper = PageWrapper;
 
-export default Page;
 export { getServerSideProps } from "@lib/team/[slug]/[type]/getServerSideProps";
+export default Page;