perf: reduce team page client payload with minimal data serialization (calcom#27656)

* perf: optimize team page data fetching by reducing host user data

For team view pages (/team/[slug]), event type hosts only need minimal
user data for avatar display (id, name, username, avatarUrl).

Previously, the full userSelect was used which included:
- teams (with nested team data)
- credentials (with app and destinationCalendars)
- email, bio

This optimization reduces data transfer significantly for teams with
many event types and hosts. With 441K requests and 54GB outgoing data
(~128KB per request), even small reductions per request add up.

The full userSelect is still used when !isTeamView to support the
connectedApps feature.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* perf: optimize team page serialization to reduce data transfer

- Replace spread operators with explicit field selection for eventTypes
- Only send minimal user data needed for UserAvatarGroup: name, username, avatarUrl, profile
- Override eventTypes in return props with minimalEventTypes
- Reduces per-request data transfer by excluding unnecessary fields like email, bio, teams, credentials

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* fix: add missing fields needed by EventTypeDescription component

Add metadata, seatsPerTimeSlot, requiresConfirmation to minimalEventTypes
Add id to user object for proper key handling

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* revert: remove serialization changes that broke TypeScript types

Keep only the query-level optimization in queries.ts which reduces
database load by fetching minimal user data for event type hosts
when isTeamView=true.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* perf: reduce team page client payload with explicit DTO types

- Create TeamPage.types.ts with explicit DTO types for minimal data
- Update getServerSideProps.tsx to return only fields needed by the UI
- Update team-view.tsx to use explicit types instead of inferSSRProps

This reduces the data sent to the client by:
- Event types: only id, title, slug, description, length, schedulingType,
  recurringEvent, metadata, requiresConfirmation, seatsPerTimeSlot
- Event type users: only id, name, username, avatarUrl, avatar, profile
- Members: only fields needed by Team component
- Children: only slug and name
- Parent: only id, slug, name, isOrganization, isPrivate, logoUrl

Combined with the query-level optimization, this should significantly
reduce the ~128KB average payload per request.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* Revert: explicit DTO approach due to type compatibility issues

The explicit DTO types broke compatibility with existing components
(EventTypeDescription, UserAvatarGroup) which expect specific type
structures. Keeping only the query-level optimization.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* perf: reduce team page client payload with minimal data serialization

- Update EventTypeDescription to accept minimal type (only fields actually used)
- Update UserAvatarGroup to accept minimal user type
- Update UserAvatar to accept minimal profile type
- Update Team component to accept minimal member type
- Update getServerSideProps to explicitly select only needed fields

This reduces the ~128KB client payload by removing unused fields from:
- Event types: removed hidden, price, currency, lockTimeZoneToggleOnBookingPage, etc.
- Event type users: only send name, username, avatarUrl, avatar, profile.username, profile.organization.slug
- Team members: only send fields needed by Team component
- Team parent/children: only send fields needed for display

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* fix: revert component type changes, keep serialization optimization

- Revert EventTypeDescription, UserAvatarGroup, UserAvatar, Team component types to original
- Keep serialization optimization in getServerSideProps.tsx
- Add missing fields (price, currency, hidden, etc.) for EventTypeDescription compatibility
- Add full profile structure for UserAvatarGroup compatibility

This reduces client payload by explicitly selecting only needed fields while
maintaining type compatibility with existing component usages.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* fix: add missing fields for component type compatibility

- Add lockedTimeZone and canSendCalVideoTranscriptionEmails for EventTypeDescription
- Add organizationId to members for Team component MemberType
- Add name, calVideoLogo, bannerUrl to organization for UserProfile type
- Reorder fields to match baseEventTypeSelect structure

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: keithwillcode

apps/web/lib/team/[slug]/getServerSideProps.tsx

@@ -164,41 +164,105 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
 
   const isTeamOrParentOrgPrivate = team.isPrivate || (team.parent?.isOrganization && team.parent?.isPrivate);
 
-  team.eventTypes =
+  const minimalEventTypes =
     team.eventTypes?.map((type) => ({
-      ...type,
+      // Fields from baseEventTypeSelect (except description which becomes descriptionAsSafeHTML)
+      id: type.id,
+      title: type.title,
+      slug: type.slug,
+      length: type.length,
+      schedulingType: type.schedulingType,
+      recurringEvent: type.recurringEvent,
+      hidden: type.hidden,
+      price: type.price,
+      currency: type.currency,
+      lockTimeZoneToggleOnBookingPage: type.lockTimeZoneToggleOnBookingPage,
+      lockedTimeZone: type.lockedTimeZone,
+      requiresConfirmation: type.requiresConfirmation,
+      requiresBookerEmailVerification: type.requiresBookerEmailVerification,
+      canSendCalVideoTranscriptionEmails: type.canSendCalVideoTranscriptionEmails,
+      seatsPerTimeSlot: type.seatsPerTimeSlot,
+      // Additional fields needed by EventTypeDescription
+      metadata: type.metadata,
+      descriptionAsSafeHTML: markdownToSafeHTML(type.description),
       users: !isTeamOrParentOrgPrivate
         ? type.users.map((user) => ({
-            ...user,
+            name: user.name,
+            username: user.username,
+            avatarUrl: user.avatarUrl,
             avatar: getUserAvatarUrl(user),
+            profile: {
+              id: user.profile.id,
+              upId: user.profile.upId,
+              username: user.profile.username,
+              organizationId: user.profile.organizationId,
+              organization: user.profile.organization
+                ? {
+                    id: user.profile.organization.id,
+                    slug: user.profile.organization.slug,
+                    name: user.profile.organization.name,
+                    requestedSlug: user.profile.organization.requestedSlug,
+                    calVideoLogo: user.profile.organization.calVideoLogo,
+                    bannerUrl: user.profile.organization.bannerUrl,
+                  }
+                : null,
+            },
           }))
         : [],
-      descriptionAsSafeHTML: markdownToSafeHTML(type.description),
     })) ?? null;
 
   const safeBio = markdownToSafeHTML(team.bio) || "";
 
-  const members = !isTeamOrParentOrgPrivate
-    ? team.members.map((member) => {
-        return {
-          name: member.name,
-          id: member.id,
-          avatarUrl: member.avatarUrl,
-          bio: member.bio,
-          profile: member.profile,
-          subteams: member.subteams,
-          username: member.username,
-          accepted: member.accepted,
-          organizationId: member.organizationId,
-          safeBio: markdownToSafeHTML(member.bio || ""),
-          bookerUrl: getBookerBaseUrlSync(member.organization?.slug || ""),
-        };
-      })
+  const minimalMembers = !isTeamOrParentOrgPrivate
+    ? team.members.map((member) => ({
+        id: member.id,
+        name: member.name,
+        username: member.username,
+        avatarUrl: member.avatarUrl,
+        bio: member.bio,
+        organizationId: member.organizationId,
+        subteams: member.subteams,
+        accepted: member.accepted,
+        profile: {
+          id: member.profile.id,
+          username: member.profile.username,
+          organizationId: member.profile.organizationId,
+          organization: member.profile.organization
+            ? {
+                id: member.profile.organization.id,
+                slug: member.profile.organization.slug,
+                name: member.profile.organization.name,
+                requestedSlug: member.profile.organization.requestedSlug,
+                calVideoLogo: member.profile.organization.calVideoLogo,
+                bannerUrl: member.profile.organization.bannerUrl,
+              }
+            : null,
+        },
+        safeBio: markdownToSafeHTML(member.bio || ""),
+        bookerUrl: getBookerBaseUrlSync(member.organization?.slug || ""),
+      }))
     : [];
 
   const markdownStrippedBio = stripMarkdown(team?.bio || "");
 
-  const serializableTeam = getSerializableTeam(team);
+  const minimalParent = team.parent
+    ? {
+        id: team.parent.id,
+        slug: team.parent.slug,
+        name: team.parent.name,
+        isOrganization: team.parent.isOrganization,
+        isPrivate: team.parent.isPrivate,
+        logoUrl: team.parent.logoUrl,
+        requestedSlug: teamMetadataSchema.parse(team.parent.metadata)?.requestedSlug ?? null,
+      }
+    : null;
+
+  const minimalChildren = isTeamOrParentOrgPrivate
+    ? []
+    : team.children.map((child) => ({
+        slug: child.slug,
+        name: child.name,
+      }));
 
   // For a team or Organization we check if it's unpublished
   // For a subteam, we check if the parent org is unpublished. A subteam can't be unpublished in itself
@@ -211,21 +275,42 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     return {
       props: {
         considerUnpublished: true,
-        team: { ...serializableTeam },
+        team: {
+          id: team.id,
+          slug: team.slug,
+          name: team.name,
+          isOrganization: team.isOrganization,
+          logoUrl: team.logoUrl,
+          metadata,
+          parent: minimalParent,
+          createdAt: null,
+        },
       },
     } as const;
   }
 
   return {
     props: {
       team: {
-        ...serializableTeam,
+        id: team.id,
+        slug: team.slug,
+        name: team.name,
+        bio: team.bio,
         safeBio,
-        members,
+        theme: team.theme,
+        isPrivate: team.isPrivate,
+        isOrganization: team.isOrganization,
+        hideBookATeamMember: team.hideBookATeamMember,
+        logoUrl: team.logoUrl,
+        brandColor: team.brandColor,
+        darkBrandColor: team.darkBrandColor,
         metadata,
-        children: isTeamOrParentOrgPrivate ? [] : team.children,
+        parent: minimalParent,
+        eventTypes: minimalEventTypes,
+        members: minimalMembers,
+        children: minimalChildren,
       },
-      themeBasis: serializableTeam.slug,
+      themeBasis: team.slug,
       markdownStrippedBio,
       isValidOrgDomain,
       currentOrgDomain,
@@ -234,20 +319,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   } as const;
 };
 
-/**
- * Removes sensitive data from team and ensures that the object is serialiable by Next.js
- */
-function getSerializableTeam(team: NonNullable<Awaited<ReturnType<typeof getTeamWithMembers>>>) {
-  const { inviteToken: _inviteToken, ...serializableTeam } = team;
-
-  const teamParent = team.parent ? getTeamWithoutMetadata(team.parent) : null;
-
-  return {
-    ...serializableTeam,
-    parent: teamParent,
-  };
-}
-
 /**
  * Removes metadata from team and just adds requestedSlug
  */
@@ -256,7 +327,6 @@ function getTeamWithoutMetadata<T extends Pick<Team, "metadata">>(team: T) {
   const teamMetadata = teamMetadataSchema.parse(metadata);
   return {
     ...rest,
-    // add requestedSlug if available.
     ...(typeof teamMetadata?.requestedSlug !== "undefined"
       ? { requestedSlug: teamMetadata?.requestedSlug }
       : {}),

packages/features/ee/teams/lib/queries.ts

@@ -40,6 +40,17 @@ export async function getTeamWithMembers(args: {
 
   // This should improve performance saving already app data found.
   const appDataMap = new Map();
+
+  // Minimal user select for event type hosts in team view - only fields needed for avatar display
+  // This significantly reduces data transfer for teams with many event types/hosts
+  const minimalUserSelectForHosts = {
+    username: true,
+    name: true,
+    avatarUrl: true,
+    id: true,
+  } satisfies Prisma.UserSelect;
+
+  // Full user select for members (includes credentials for connectedApps when !isTeamView)
   const userSelect = {
     username: true,
     email: true,
@@ -156,7 +167,9 @@ export async function getTeamWithMembers(args: {
           hosts: {
             select: {
               user: {
-                select: userSelect,
+                // For team view, we only need minimal user info for avatar display
+                // This significantly reduces data transfer for teams with many event types/hosts
+                select: isTeamView ? minimalUserSelectForHosts : userSelect,
               },
             },
           },