perf: leverage trpc initialData for event-types page (#20496)

* create createRouterCaller and use it

* fix

* leverage trpc initialData for event-types page

* finalize

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>
   );
 };

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(() => {