perf: using-dynamic-imports #19204

TusharBhatt1 · 2025-02-09T09:57:46Z

What does this PR do?

This PR optimizes the /bookings page by adding dynamic imports to reduce bundle size by around 75% and improve performance.

Components imported dynamically , since they are rendered conditionally :
1. Alert (@calcom/ui)
2. DataTableWrapper (@calcom/features/data-table)
3. BookingListItem (@components/booking/BookingListItem)
4. EmptyScreen (@calcom/ui)
5. WipeMyCalActionButton (@calcom/app-store/wipemycalother/components)
6. FiltersContainer (@calcom/features/bookings/components/FiltersContainer)
Adds loading indicators for a smoother user experience while components load.
Disables SSR for specific components to save resources and focus on client-side rendering.

Dynamic import (import() in Next.js) loads modules only when needed, reducing the initial bundle size and improving performance by enabling code-splitting and lazy loading.

Before :

After :

Mandatory Tasks (DO NOT REMOVE)

I have self-reviewed the code (A decent size PR without self-review might be rejected).
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?

Tested , works as expected.

vercel · 2025-02-09T09:57:50Z

@TusharBhatt1 is attempting to deploy a commit to the cal-staging Team on Vercel.

A member of the Team first needs to authorize it.

CLAassistant · 2025-02-09T09:57:52Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

github-actions · 2025-02-09T09:57:58Z

Hey there and thank you for opening this pull request! 👋🏼

We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted.

Details:

No release type found in pull request title "perf : using dynamic imports". Add a prefix to indicate what kind of release this pull request corresponds to. For reference, see https://www.conventionalcommits.org/

Available types:
 - feat: A new feature
 - fix: A bug fix
 - docs: Documentation only changes
 - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - refactor: A code change that neither fixes a bug nor adds a feature
 - perf: A code change that improves performance
 - test: Adding missing tests or correcting existing tests
 - build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
 - ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
 - chore: Other changes that don't modify src or test files
 - revert: Reverts a previous commit

TusharBhatt1 · 2025-02-09T10:00:06Z

apps/web/modules/bookings/views/bookings-listing-view.tsx

@@ -157,8 +188,7 @@ function BookingsContent({ status }: BookingsProps) {
    ];
  }, [user, status]);

-  const isEmpty = useMemo(() => !query.data?.pages[0]?.bookings.length, [query.data]);


Its computation is inexpensive and doesn't impact performance.
Introduces overhead by adding complexity and memory usage for tracking dependencies

graphite-app · 2025-02-09T10:00:10Z

Graphite Automations

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

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

"Add community label" took an action on this PR • (02/09/25)

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

Udit-takkar · 2025-02-10T08:33:35Z

apps/web/modules/bookings/views/bookings-listing-view.tsx


 import useMeQuery from "@lib/hooks/useMeQuery";

-import BookingListItem from "@components/booking/BookingListItem";


Booking List Item is core part of /bookings. I don't think we should dynamically load this as this component would be required 99% of the times

I understood your concern , but there are cases when the user has no bookings or an error occurs, making this component unnecessary. Moreover, we’re dynamically importing it on the server, so it won’t impact client-side performance.
Also it's a heavy component , dynamic import will be beneficial

I'm not too sure about this. As Udit said, it's 99% of the times required. Reducing the bundle size on the server side won't affect much.

In the end, we download the same size of the bundle on the client side (because we need them).

But with this approach, the client will have to make an asynchronous request to get these lazy components which is unnecessary separate requests with unncessary loaders.

Understood , but use cases where the component is required, the additional request overhead is negligible compared to the performance gains for the edge cases.

I don't understand how this is a performance gain. DataTable and BookingListItem is an essential part of this page. Even if the size of page.js is reduced, we immediately load them in separate requests.

On the other hand, I think it's indeed a performance win for WipeMyCalActionButton because it's clearly "optionally" used after a certain amount of time of the page load.

I understand your perspective, but the performance gain comes from deferring the loading of DataTable and BookingListItem (in times when no bookings , error , etc ) until they are actually needed, rather than including them in the initial page payload.

While it's true that these components are eventually required and are loaded in separate requests, the initial page load benefits because :

The size of page.js is reduced, which speeds up the Time to First Byte (TTFB) and the rendering of the critical parts of the page.

Components like BookingListItem and DataTable are dynamically loaded (only when required , not everytime during initial page load), so their loading happens in parallel with other resources instead of blocking the page render.

This approach is particularly effective because these components aren’t required for every use case (e.g., when there are no bookings or an error occurs). By deferring their loading, we reduce unnecessary server load and improve the perceived load time for the end user.

Let me know if I am missing something

Udit-takkar · 2025-02-10T08:39:41Z

apps/web/modules/bookings/views/bookings-listing-view.tsx

+const DataTableWrapper = dynamic(
+  () => import("@calcom/features/data-table").then((mod) => mod.DataTableWrapper),
+  {
+    ssr: false,
+    loading: () => <SkeletonLoader />,
+  }
+);
+


Same as https://github.com/calcom/cal.com/pull/19204/files#r1948589670.

I understood your concern , but there are cases when this won't be required like if the query fails, bookings are empty, or there are no upcoming bookings today.

Udit-takkar · 2025-02-10T08:43:01Z

apps/web/modules/bookings/views/bookings-listing-view.tsx

+const FiltersContainer = dynamic(
+  () => import("@calcom/features/bookings/components/FiltersContainer").then((mod) => mod.FiltersContainer),
+  {
+    ssr: false,
+    loading: () => <Icon name="loader" className="animate-spin" />,
+  }
+);
+


Screen.Recording.2025-02-10.at.2.12.20.PM.mov

We should show a skeleton loader here instead of this loader

I think it's degrading the user experience by showing a loader when toggling filter components. It should already be there.

Understood , but based on my analysis, dynamic import is the ideal approach for this scenario.
During the initial page load this is not required and there are high possibility that the user doesn’t require the component , such as when they don’t interact with the filter.

Additionally, we are already dynamically importing DateRangePicker , the user is still experiencing a very minimal delay. However, the performance gain from this approach is genuine and ensures we only load what’s necessary.

import dynamic from "next/dynamic"; export const DateRangePickerLazy = dynamic(() => import("./DateRangePicker").then((mod) => mod.DatePickerWithRange) );

In case of the DateRangePicker, it's obvious to dynamically load it, because

1. Page Load > 2. User wants to filter > 3. User wants to filter by custom date range

It's at the 3rd step in the funnel. However, FiltersContainer is the 2nd step. So it's a different story.

Can we get the specific number of bundle size different by dynamically importing FiltersContainer?

290kB (transferred over network) and resource size is 1.3 MB

Screen.Recording.2025-02-10.at.2.12.20.PM.mov
We should show a skeleton loader here instead of this loader

Done

…om/TusharBhatt1/cal.com into perf/dynamic-imports-bookings-page

hbjORbj

Type checks are failing

github-actions · 2025-02-11T11:03:00Z

E2E results are ready!

Workflow #47126.1 latest results

TusharBhatt1 · 2025-02-11T11:19:49Z

Type checks are failing

Fixed (branch update was required)

perf : using dynamic imports

572ac1a

graphite-app bot requested a review from a team February 9, 2025 09:57

graphite-app bot added the community Created by Linear-GitHub Sync label Feb 9, 2025

keithwillcode added the community-interns The team responsible for reviewing, testing and shipping low/medium community PRs label Feb 9, 2025

dosubot bot added bookings area: bookings, availability, timezones, double booking performance area: performance, page load, slow, slow endpoints, loading screen, unresponsive labels Feb 9, 2025

TusharBhatt1 commented Feb 9, 2025

View reviewed changes

revert condtion

cad7016

TusharBhatt1 changed the title ~~perf : using dynamic imports~~ perf: using dynamic imports Feb 9, 2025

TusharBhatt1 changed the title ~~perf: using dynamic imports~~ perf: using-dynamic-imports Feb 9, 2025

fix: ts error

eef2041

Udit-takkar added this to the v5.0 milestone Feb 10, 2025

Udit-takkar reviewed Feb 10, 2025

View reviewed changes

TusharBhatt1 and others added 4 commits February 10, 2025 15:13

Merge branch 'main' into perf/dynamic-imports-bookings-page

c800a59

Merge branch 'main' into perf/dynamic-imports-bookings-page

2627856

fix: add skeleton

993b334

Merge branch 'perf/dynamic-imports-bookings-page' of https://github.c…

841781d

…om/TusharBhatt1/cal.com into perf/dynamic-imports-bookings-page

hbjORbj added the ready-for-e2e label Feb 11, 2025

hbjORbj requested changes Feb 11, 2025

View reviewed changes

github-actions bot marked this pull request as draft February 11, 2025 10:37

Merge branch 'main' into perf/dynamic-imports-bookings-page

5f75929

TusharBhatt1 marked this pull request as ready for review February 11, 2025 11:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

perf: using-dynamic-imports #19204

perf: using-dynamic-imports #19204

TusharBhatt1 commented Feb 9, 2025 •

edited

Loading

vercel bot commented Feb 9, 2025

CLAassistant commented Feb 9, 2025

github-actions bot commented Feb 9, 2025 •

edited

Loading

TusharBhatt1 Feb 9, 2025

graphite-app bot commented Feb 9, 2025

Udit-takkar Feb 10, 2025

TusharBhatt1 Feb 10, 2025 •

edited

Loading

eunjae-lee Feb 10, 2025 •

edited

Loading

TusharBhatt1 Feb 10, 2025

eunjae-lee Feb 10, 2025

TusharBhatt1 Feb 10, 2025 •

edited

Loading

Udit-takkar Feb 10, 2025

TusharBhatt1 Feb 10, 2025

Udit-takkar Feb 10, 2025

TusharBhatt1 Feb 10, 2025

eunjae-lee Feb 10, 2025

TusharBhatt1 Feb 10, 2025 •

edited

Loading

eunjae-lee Feb 10, 2025

TusharBhatt1 Feb 10, 2025

TusharBhatt1 Feb 10, 2025

hbjORbj left a comment

github-actions bot commented Feb 11, 2025 •

edited

Loading

TusharBhatt1 commented Feb 11, 2025


		import useMeQuery from "@lib/hooks/useMeQuery";

		import BookingListItem from "@components/booking/BookingListItem";

perf: using-dynamic-imports #19204

Are you sure you want to change the base?

perf: using-dynamic-imports #19204

Conversation

TusharBhatt1 commented Feb 9, 2025 • edited Loading

What does this PR do?

Mandatory Tasks (DO NOT REMOVE)

How should this be tested?

vercel bot commented Feb 9, 2025

CLAassistant commented Feb 9, 2025

github-actions bot commented Feb 9, 2025 • edited Loading

Choose a reason for hiding this comment

graphite-app bot commented Feb 9, 2025

Graphite Automations

Choose a reason for hiding this comment

TusharBhatt1 Feb 10, 2025 • edited Loading

Choose a reason for hiding this comment

eunjae-lee Feb 10, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TusharBhatt1 Feb 10, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TusharBhatt1 Feb 10, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hbjORbj left a comment

Choose a reason for hiding this comment

github-actions bot commented Feb 11, 2025 • edited Loading

E2E results are ready!

TusharBhatt1 commented Feb 11, 2025

TusharBhatt1 commented Feb 9, 2025 •

edited

Loading

github-actions bot commented Feb 9, 2025 •

edited

Loading

TusharBhatt1 Feb 10, 2025 •

edited

Loading

eunjae-lee Feb 10, 2025 •

edited

Loading

TusharBhatt1 Feb 10, 2025 •

edited

Loading

TusharBhatt1 Feb 10, 2025 •

edited

Loading

github-actions bot commented Feb 11, 2025 •

edited

Loading