From da16cb79f125d3571db858ad88e5d376108505c9 Mon Sep 17 00:00:00 2001
From: Amrit Rai <iamamrit27@gmail.com>
Date: Mon, 17 Feb 2025 09:19:09 +0530
Subject: [PATCH 1/2] feat: make first tab active by default

---
 .../views/event-types-listing-view.tsx        | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

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 9a6c368356fe86..4a62052bdc1ae4 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
@@ -911,12 +911,19 @@ const InfiniteScrollMain = ({
     return <InfiniteSkeletonLoader />;
   }
 
-  const tabs = eventTypeGroups.map((item) => ({
-    name: item.profile.name ?? "",
-    href: item.teamId ? `/event-types?teamId=${item.teamId}` : "/event-types?noTeam",
-    avatar: item.profile.image,
-    "data-testid": item.profile.name ?? "",
-  }));
+  const tabs = eventTypeGroups.map((item, index) => {
+    let href = item.teamId ? `/event-types?teamId=${item.teamId}` : "/event-types?noTeam";
+    // If it's the first tab and no teamId is in the URL, set href to just /event-types
+    if (index === 0 && searchParams && !searchParams.has("teamId") && !searchParams.has("noTeam")) {
+      href = "/event-types";
+    }
+    return {
+      name: item.profile.name ?? "",
+      href: href,
+      avatar: item.profile.image,
+      "data-testid": item.profile.name ?? "",
+    };
+  });
 
   const activeEventTypeGroup =
     eventTypeGroups.filter((item) => item.teamId === data.teamId) ?? eventTypeGroups[0];

From 688d70b323afdbd7f3178fb69d246536a847bf9d Mon Sep 17 00:00:00 2001
From: Amrit Rai <iamamrit27@gmail.com>
Date: Tue, 18 Feb 2025 12:20:27 +0530
Subject: [PATCH 2/2] perf: optimize event types tabs rendering with useMemo

---
 .../views/event-types-listing-view.tsx        | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

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 4a62052bdc1ae4..5369254cc69f9d 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
@@ -5,7 +5,7 @@ import { Trans } from "next-i18next";
 import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { FC } from "react";
-import { memo, useEffect, useState } from "react";
+import { memo, useEffect, useState, useMemo } from "react";
 import { z } from "zod";
 
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
@@ -903,6 +903,24 @@ const InfiniteScrollMain = ({
   const { data } = useTypedQuery(querySchema);
   const orgBranding = useOrgBranding();
 
+  const tabs = useMemo(() => {
+    return (
+      eventTypeGroups?.map((item, index) => {
+        let href = item.teamId ? `/event-types?teamId=${item.teamId}` : "/event-types?noTeam";
+        // If it's the first tab and no teamId is in the URL, set href to just /event-types
+        if (index === 0 && searchParams && !searchParams.has("teamId") && !searchParams.has("noTeam")) {
+          href = "/event-types";
+        }
+        return {
+          name: item.profile.name ?? "",
+          href,
+          avatar: item.profile.image,
+          "data-testid": item.profile.name ?? "",
+        };
+      }) ?? []
+    );
+  }, [eventTypeGroups, searchParams]);
+
   if (status === "error") {
     return <Alert severity="error" title="Something went wrong" message={errorMessage} />;
   }
@@ -911,20 +929,6 @@ const InfiniteScrollMain = ({
     return <InfiniteSkeletonLoader />;
   }
 
-  const tabs = eventTypeGroups.map((item, index) => {
-    let href = item.teamId ? `/event-types?teamId=${item.teamId}` : "/event-types?noTeam";
-    // If it's the first tab and no teamId is in the URL, set href to just /event-types
-    if (index === 0 && searchParams && !searchParams.has("teamId") && !searchParams.has("noTeam")) {
-      href = "/event-types";
-    }
-    return {
-      name: item.profile.name ?? "",
-      href: href,
-      avatar: item.profile.image,
-      "data-testid": item.profile.name ?? "",
-    };
-  });
-
   const activeEventTypeGroup =
     eventTypeGroups.filter((item) => item.teamId === data.teamId) ?? eventTypeGroups[0];