perf: layout persistence and reduced bundle size #18889

hbjORbj · 2025-01-25T15:38:47Z

What does this PR do?

Affected routes: /event-types, /bookings/[status], /availability
Creates a route group, (main-nav), and layout.tsx file inside with Shell
Previously, each route was wrapping itself with Shell individually in its client component
Thanks to the newly added layout file, we now render layout once, and it gets cached / reused across these routes (hence better speed)
Bundle size also gets smaller:
e.g.,

Before:
/event-types (100KB) = Route code (70KB) + Shell (30KB)  
/bookings (110KB) = Route code (80KB) + Shell (30KB)

After:
layout.js (30KB) - Shared
/event-types (70KB) = Route code only
/bookings (80KB) = Route code only

We need to move other main-nav pages to this route group (in separate PRs)

Mandatory Tasks (DO NOT REMOVE)

I have self-reviewed the code (A decent size PR without self-review might be rejected).
N/A - I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

Please use the latest Vercel preview and test please 🙏.

…ration

vercel · 2025-01-25T15:39:00Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
cal	⬜️ Ignored (Inspect)	Visit Preview		Jan 27, 2025 10:46am
calcom-web-canary	⬜️ Ignored (Inspect)	Visit Preview		Jan 27, 2025 10:46am

graphite-app · 2025-01-25T15:40:11Z

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (01/25/25)

1 reviewer was added to this PR based on Keith Williams's automation.

hbjORbj · 2025-01-25T15:48:16Z

apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx

+      {props.afterHeading && <>{props.afterHeading}</>}
+
+      <div className={classNames(props.flexChildrenContainer && "flex flex-1 flex-col")}>
+        {props.children}


children is here

hbjORbj · 2025-01-25T15:48:20Z

apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx

+                      : "pwa:bottom-[max(7rem,_calc(5rem_+_env(safe-area-inset-bottom)))] fixed bottom-20 z-40 ltr:right-4 rtl:left-4 md:z-auto md:ltr:right-0 md:rtl:left-0",
+                    "flex-shrink-0 [-webkit-app-region:no-drag] md:relative md:bottom-auto md:right-auto"
+                  )}>
+                  {props.CTA}


hbjORbj · 2025-01-25T15:48:57Z

apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx

+
+// Copied from `ShellMain` but with a different `ShellMainAppDirBackButton` import
+// for client/server component separation
+export function ShellMainAppDir(props: LayoutProps) {


Copied from ShellMain component inside Shell.tsx.
I was able to turn this into RSC by extracting the back button into a separate client component ShellMainAppDirBackButton.tsx.

hbjORbj · 2025-01-25T15:49:59Z

apps/web/app/(use-page-wrapper)/(main-nav)/availability/page.tsx

+        heading={t("availability")}
+        subtitle={t("configure_availability")}


fyi, title or description are not needed. They are passed to Shell.tsx for SEO purposes, but they aren't used anywhere in ShellMain. Also, we turn withoutSeo={true} anyways since App Router handles Metadata already

hbjORbj · 2025-01-25T15:54:07Z

apps/web/modules/event-types/views/event-types-listing-view.tsx

@@ -942,8 +941,36 @@ const InfiniteScrollMain = ({
  );
 };

+export const EventTypesCTA = () => {


extracted from CTA={...} in Main Page below

hbjORbj · 2025-01-25T15:54:22Z

apps/web/modules/availability/availability-view.tsx

@@ -195,14 +194,11 @@ type PageProps = {
  currentOrg?: Awaited<ReturnType<typeof OrganizationRepository.findCurrentOrg>> | null;
 };

-export default function AvailabilityPage({ currentOrg }: PageProps) {
+export const AvailabilityCTA = () => {


Extracted from CTA={...} from Main page below

hbjORbj · 2025-01-25T15:54:41Z

apps/web/app/(use-page-wrapper)/(main-nav)/event-types/page.tsx

@@ -19,14 +20,23 @@ export const generateMetadata = async () =>

 const Page = async ({ params, searchParams }: PageProps) => {
  const context = buildLegacyCtx(headers(), cookies(), params, searchParams);
-  const session = await getServerSessionForAppDir();


this makes initial RSC fetch so slow, check https://app.campsite.com/cal/posts/58hm2drix99s

github-actions · 2025-01-25T16:10:39Z

E2E results are ready!

Workflow #45411.1 latest results

Udit-takkar

Unit tests failing and merge conflicts

…ce-and-reduced-bundle-size

fixed

* create /(main-nav)/layout.tsx file that uses Shell * Add ShellMainAppDir that clones ShellMain but with client/server separation * event-types, availability, bookings * update pagesAndRewritePaths logic * fix --------- Co-authored-by: Peer Richelsen <peeroke@gmail.com>

hbjORbj added 3 commits January 25, 2025 10:37

create /(main-nav)/layout.tsx file that uses Shell

d2a506e

Add ShellMainAppDir that clones ShellMain but with client/server sepa…

c0a75a5

…ration

event-types, availability, bookings

8d12adf

graphite-app bot requested a review from a team January 25, 2025 15:38

keithwillcode added consumer core labels Jan 25, 2025

dosubot bot added the performance label Jan 25, 2025

vercel bot deployed to Preview – api January 25, 2025 15:45 View deployment

hbjORbj added the ready-for-e2e label Jan 25, 2025

update pagesAndRewritePaths logic

d6a223b

hbjORbj commented Jan 25, 2025

View reviewed changes

vercel bot deployed to Preview – api January 25, 2025 15:54 View deployment

hbjORbj commented Jan 25, 2025

View reviewed changes

PeerRich previously approved these changes Jan 25, 2025

View reviewed changes

Merge branch 'main' into perf/layout-persistence-and-reduced-bundle-size

b848716

vercel bot deployed to Preview – api January 25, 2025 17:43 View deployment

Udit-takkar previously requested changes Jan 27, 2025

View reviewed changes

hbjORbj added 2 commits January 27, 2025 05:35

Merge remote-tracking branch 'origin/main' into perf/layout-persisten…

d57b43d

…ce-and-reduced-bundle-size

fix

e4e8728

hbjORbj dismissed PeerRich’s stale review via e4e8728 January 27, 2025 10:39

hbjORbj enabled auto-merge (squash) January 27, 2025 10:39

vercel bot deployed to Preview – api January 27, 2025 10:45 View deployment

PeerRich approved these changes Jan 27, 2025

View reviewed changes

Merge branch 'main' into perf/layout-persistence-and-reduced-bundle-size

7efd442

vercel bot deployed to Preview – api January 27, 2025 10:53 View deployment

hbjORbj merged commit ee31633 into main Jan 27, 2025
38 checks passed

hbjORbj deleted the perf/layout-persistence-and-reduced-bundle-size branch January 27, 2025 11:08

hbjORbj mentioned this pull request Jan 31, 2025

perf: move /teams page to (use-page-wrapper)/(main-nav) route group to use its shared layout #19037

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

perf: layout persistence and reduced bundle size #18889

perf: layout persistence and reduced bundle size #18889

hbjORbj commented Jan 25, 2025 •

edited

Loading

vercel bot commented Jan 25, 2025 •

edited

Loading

graphite-app bot commented Jan 25, 2025

hbjORbj Jan 25, 2025

hbjORbj Jan 25, 2025

hbjORbj Jan 25, 2025

hbjORbj Jan 25, 2025

hbjORbj Jan 25, 2025

hbjORbj Jan 25, 2025

hbjORbj Jan 25, 2025

github-actions bot commented Jan 25, 2025 •

edited

Loading

Udit-takkar left a comment

		heading={t("availability")}
		subtitle={t("configure_availability")}

perf: layout persistence and reduced bundle size #18889

perf: layout persistence and reduced bundle size #18889

Conversation

hbjORbj commented Jan 25, 2025 • edited Loading

What does this PR do?

Mandatory Tasks (DO NOT REMOVE)

How should this be tested?

vercel bot commented Jan 25, 2025 • edited Loading

graphite-app bot commented Jan 25, 2025

Graphite Automations

hbjORbj Jan 25, 2025

Choose a reason for hiding this comment

hbjORbj Jan 25, 2025

Choose a reason for hiding this comment

hbjORbj Jan 25, 2025

Choose a reason for hiding this comment

hbjORbj Jan 25, 2025

Choose a reason for hiding this comment

hbjORbj Jan 25, 2025

Choose a reason for hiding this comment

hbjORbj Jan 25, 2025

Choose a reason for hiding this comment

hbjORbj Jan 25, 2025

Choose a reason for hiding this comment

github-actions bot commented Jan 25, 2025 • edited Loading

E2E results are ready!

Udit-takkar left a comment

Choose a reason for hiding this comment

hbjORbj commented Jan 25, 2025 •

edited

Loading

vercel bot commented Jan 25, 2025 •

edited

Loading

github-actions bot commented Jan 25, 2025 •

edited

Loading