From 7801266dbe9252c262e82d373759ce20b307773a Mon Sep 17 00:00:00 2001
From: Romit <85230081+romitg2@users.noreply.github.com>
Date: Sun, 8 Mar 2026 13:14:30 +0530
Subject: [PATCH] fix: remove TeamsCTA from teams loading skeleton (#28323)

* fix: resolve duplicate new-team-btn selector in teams E2E test

Remove TeamsCTA from the loading skeleton to prevent duplicate
data-testid='new-team-btn' elements in the DOM during Next.js
streaming SSR. The skeleton's Suspense fallback and the resolved
page content can briefly coexist, causing Playwright's strict
mode to fail when both contain the same test ID.

Also use .first() in the E2E test as a defensive measure.

Co-Authored-By: romitgabani1 <romitgabani1.work@gmail.com>

* fix: assert single new-team-btn element instead of using .first()

Address Cubic AI review feedback: use toHaveCount(1) assertion
to ensure exactly one new-team-btn exists, rather than .first()
which could mask duplicate-element regressions.

Co-Authored-By: romitgabani1 <romitgabani1.work@gmail.com>

* fix: revert test changes, only remove CTA from skeleton

Per user feedback: only change needed is removing TeamsCTA from
the loading skeleton to prevent users without a team plan from
bypassing the upgrade banner via the skeleton CTA.

Co-Authored-By: romitgabani1 <romitgabani1.work@gmail.com>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../(use-page-wrapper)/(main-nav)/teams/skeleton.tsx   | 10 ++--------
 apps/web/playwright/teams.e2e.ts                       |  5 +----
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/teams/skeleton.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/teams/skeleton.tsx
index 757da4ada5..7c37672e52 100644
--- a/apps/web/app/(use-page-wrapper)/(main-nav)/teams/skeleton.tsx
+++ b/apps/web/app/(use-page-wrapper)/(main-nav)/teams/skeleton.tsx
@@ -1,19 +1,13 @@
 "use client";
 
-import { ShellMainAppDir } from "app/(use-page-wrapper)/(main-nav)/ShellMainAppDir";
-import { TeamsCTA } from "app/(use-page-wrapper)/(main-nav)/teams/CTA";
-
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-
+import { ShellMainAppDir } from "app/(use-page-wrapper)/(main-nav)/ShellMainAppDir";
 import SkeletonLoaderTeamList from "~/ee/teams/components/SkeletonloaderTeamList";
 
 export const TeamsListSkeleton = () => {
   const { t } = useLocale();
   return (
-    <ShellMainAppDir
-      heading={t("teams")}
-      subtitle={t("create_manage_teams_collaborative")}
-      CTA={<TeamsCTA />}>
+    <ShellMainAppDir heading={t("teams")} subtitle={t("create_manage_teams_collaborative")}>
       <SkeletonLoaderTeamList />
     </ShellMainAppDir>
   );
diff --git a/apps/web/playwright/teams.e2e.ts b/apps/web/playwright/teams.e2e.ts
index 3d0208da25..cab9b5de29 100644
--- a/apps/web/playwright/teams.e2e.ts
+++ b/apps/web/playwright/teams.e2e.ts
@@ -1,9 +1,7 @@
-import { expect } from "@playwright/test";
-
 import { IS_TEAM_BILLING_ENABLED } from "@calcom/lib/constants";
 import { prisma } from "@calcom/prisma";
 import { SchedulingType } from "@calcom/prisma/enums";
-
+import { expect } from "@playwright/test";
 import { test, todo } from "./lib/fixtures";
 import {
   bookTimeSlot,
@@ -175,7 +173,6 @@ test.describe("Teams - NonOrg", () => {
     await page.goto("/teams");
 
     await test.step("Can create team with same name", async () => {
-      // Click the new team button
       await page.locator("[data-testid=new-team-btn]").click();
       await page.waitForLoadState("networkidle");
       // Fill team name input (new onboarding-v3 style flow)