fix(platform): loading spinner showing on all plans by scoping loading state to selected plan

[priyanshusaini105]

Fixes #25290

Problem

When users clicked on a plan card in the Cal.com Platform pricing UI, the loading spinner would appear on ALL plan cards simultaneously instead of just the selected one. This gave a confusing UX impression that all plans were being processed at the same time.

Solution

Track the currently loading plan using a loadingPlan state variable that stores which plan the user clicked on, rather than relying solely on the pending state from the mutation hook.

Changes

• Added loadingPlan state to track which specific plan is loading
• Update loadingPlan when a plan subscription is initiated
• Reset loadingPlan on error to ensure UI returns to normal state
• Modified isLoading prop condition to check if the current plan matches the loadingPlan before showing the spinner

This ensures that only the plan card the user clicked on displays the loading indicator, while other plans remain in their normal state.

What does this PR do?

• Fixes Loading spinner appears on all plans instead of only the selected plan in Cal.com Platform UI #25290 (GitHub issue number)
• Fixes CAL-6794 (Linear issue number - should be visible at the bottom of the GitHub issue description)

Visual Demo (For contributors especially)

A visual demonstration is strongly recommended, for both the original and new change (video / image - any one).

Video Demo (if applicable):

screen-capture.1.webm

• Show screen recordings of the issue or feature.

• Demonstrate how to reproduce the issue, the behavior before and after the change.

Image Demo (if applicable):

• Add side-by-side screenshots of the original and updated change.
• Highlight any significant change(s).

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

• Are there environment variables that should be set?
• What are the minimal test data to have?
• What is expected (happy path) to have (input and output)?
• Any other important info that could help to test that PR

Checklist

• I haven't read the contributing guide
• My code doesn't follow the style guidelines of this project
• I haven't commented my code, particularly in hard-to-understand areas
• I haven't checked if my changes generate no new warnings

---

Summary by cubic

Scopes the Platform pricing loading spinner to only the selected plan, so clicking a plan shows a spinner on that card only. Fixes CAL-6794 by meeting the requirement to display the loading state for the chosen plan.

• Bug Fixes
  • Track the selected plan in a loadingPlan state.
  • Reset loadingPlan on error.
  • Show spinner only when loadingPlan matches the card and the mutation is pending.

^{Written for commit 3047afc. Summary will update automatically on new commits.}

[vercel]

@priyanshusaini105 is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

[CLAassistant]

All committers have signed the CLA.

[cubic-dev-ai]

No issues found across 1 file

[anikdhabal]

LGTM

[github-actions]

E2E results are ready!

• Workflow #89349.1 latest results