From 9cf76cbb2fb760c5bcbb880416d709af7b47d214 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Sat, 5 Apr 2025 01:59:46 -0400
Subject: [PATCH] perf: leverage trpc initialData for event-types page (#20496)

* create createRouterCaller and use it

* fix

* leverage trpc initialData for event-types page

* finalize
---
 .../(main-nav)/event-types/page.tsx             | 14 +++++++++++---
 .../views/event-types-listing-view.tsx          | 17 +++++++++--------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/event-types/page.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/event-types/page.tsx
index 8a11ed2452..0cc9b6026d 100644
--- a/apps/web/app/(use-page-wrapper)/(main-nav)/event-types/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/(main-nav)/event-types/page.tsx
@@ -1,10 +1,13 @@
 import { ShellMainAppDir } from "app/(use-page-wrapper)/(main-nav)/ShellMainAppDir";
+import { createRouterCaller } from "app/_trpc/context";
 import type { PageProps } from "app/_types";
 import { _generateMetadata, getTranslate } from "app/_utils";
 import { cookies, headers } from "next/headers";
 import { redirect } from "next/navigation";
 
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { getTeamsFiltersFromQuery } from "@calcom/features/filters/lib/getTeamsFiltersFromQuery";
+import { eventTypesRouter } from "@calcom/trpc/server/routers/viewer/eventTypes/_router";
 
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 
@@ -17,7 +20,8 @@ export const generateMetadata = async () =>
   );
 
 const Page = async ({ params, searchParams }: PageProps) => {
-  const context = buildLegacyCtx(await headers(), await cookies(), await params, await searchParams);
+  const _searchParams = await searchParams;
+  const context = buildLegacyCtx(await headers(), await cookies(), await params, _searchParams);
   const session = await getServerSession({ req: context.req });
 
   if (!session?.user?.id) {
@@ -26,12 +30,16 @@ const Page = async ({ params, searchParams }: PageProps) => {
 
   const t = await getTranslate();
 
+  const caller = await createRouterCaller(eventTypesRouter);
+  const filters = getTeamsFiltersFromQuery(_searchParams);
+  const initialData = await caller.getUserEventGroups({ filters });
+
   return (
     <ShellMainAppDir
       heading={t("event_types_page_title")}
       subtitle={t("event_types_page_subtitle")}
-      CTA={<EventTypesCTA />}>
-      <EventTypes />
+      CTA={<EventTypesCTA initialData={initialData} filters={filters} />}>
+      <EventTypes initialData={initialData} filters={filters} />
     </ShellMainAppDir>
   );
 };
diff --git a/apps/web/modules/event-types/views/event-types-listing-view.tsx b/apps/web/modules/event-types/views/event-types-listing-view.tsx
index 0403536eee..b6f18ee416 100644
--- a/apps/web/modules/event-types/views/event-types-listing-view.tsx
+++ b/apps/web/modules/event-types/views/event-types-listing-view.tsx
@@ -18,14 +18,12 @@ import {
   InfiniteSkeletonLoader,
   EventTypesSkeletonLoader,
 } from "@calcom/features/eventtypes/components/SkeletonLoader";
-import { getTeamsFiltersFromQuery } from "@calcom/features/filters/lib/getTeamsFiltersFromQuery";
 import { parseEventTypeColor } from "@calcom/lib";
 import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
 import { useCopy } from "@calcom/lib/hooks/useCopy";
 import { useDebounce } from "@calcom/lib/hooks/useDebounce";
 import { useInViewObserver } from "@calcom/lib/hooks/useInViewObserver";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { useGetTheme } from "@calcom/lib/hooks/useTheme";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { HttpError } from "@calcom/lib/http-error";
@@ -948,16 +946,20 @@ const InfiniteScrollMain = ({
   );
 };
 
-export const EventTypesCTA = () => {
+type Props = {
+  initialData: RouterOutputs["viewer"]["eventTypes"]["getUserEventGroups"];
+  filters?: { teamIds?: number[] | undefined; userIds?: number[] | undefined; upIds?: string[] | undefined };
+};
+
+export const EventTypesCTA = ({ initialData, filters }: Props) => {
   const { data: user } = useMeQuery();
-  const routerQuery = useRouterQuery();
-  const filters = getTeamsFiltersFromQuery(routerQuery);
   const { data: getUserEventGroupsData } = trpc.viewer.eventTypes.getUserEventGroups.useQuery(
     filters && { filters },
     {
       refetchOnWindowFocus: false,
       gcTime: 1 * 60 * 60 * 1000,
       staleTime: 1 * 60 * 60 * 1000,
+      initialData,
     }
   );
   const profileOptions =
@@ -977,13 +979,11 @@ export const EventTypesCTA = () => {
   return <CTA profileOptions={profileOptions} isOrganization={!!user?.organizationId} />;
 };
 
-const EventTypesPage: React.FC = () => {
+const EventTypesPage = ({ initialData, filters }: Props) => {
   const { data: user } = useMeQuery();
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_showProfileBanner, setShowProfileBanner] = useState(false);
   const orgBranding = useOrgBranding();
-  const routerQuery = useRouterQuery();
-  const filters = getTeamsFiltersFromQuery(routerQuery);
   const router = useRouter();
 
   // TODO: Maybe useSuspenseQuery to focus on success case only? Remember that it would crash the page when there is an error in query. Also, it won't support skeleton
@@ -995,6 +995,7 @@ const EventTypesPage: React.FC = () => {
     refetchOnWindowFocus: false,
     gcTime: 1 * 60 * 60 * 1000,
     staleTime: 1 * 60 * 60 * 1000,
+    initialData,
   });
 
   useEffect(() => {