fix: potential fix for flaky layout shift (#18651)

* potential fix: layout shift * fix lint error
calcom · Jan 14, 2025 · f6d0a2c · f6d0a2c
1 parent f5ab9bd
commit f6d0a2c
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 54 deletions.
diff --git 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,67 +24,40 @@ function Type({
   slug,
   user,
   booking,
-  isEmbed,
   isBrandingHidden,
   eventData,
   isInstantMeeting,
   orgBannerUrl,
   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
@@ -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;