Pricing buttons don't respond until the cards hydrate

Open
  • Is something wrong?
#152 0 comments 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 7 days

@fonodi is already working on this.

Since Nov 9, 2026.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
react, typescript
Domain
frontend, performance

Research direction

Start by reproducing the delay on /pricing-cms with a 6x CPU throttle in DevTools and timing when the "Buy now" handler in PricingCheckoutModal.tsx attaches. Then check PricingSwitcher.tsx and PricingBillingContext.tsx under plans/strapi-plan-pricing-cards/ for work that delays hydration. Done when the controls respond before hydration, or hydration is measurably faster and the waitForElementHydration wait in the tests can be relaxed.

Written by the indexing model from the issue text.

Description

Where: /pricing-cms ("Buy now" on Growth, which opens the checkout dialog) and /pricing-cloud (the Monthly/Yearly toggle).

What's wrong: the pricing cards hydrate noticeably later than the rest of the page: about 3.5 seconds after it in Firefox, up to about 20 seconds in headless Firefox on a loaded machine. Clicks before that do nothing, because the button exists in the HTML but its click handler isn't attached yet. Normal manual use is fine, but on slow devices or connections users can click a dead button.

Code: client components in plans/strapi-plan-pricing-cards/: PricingCheckoutModal.tsx (dialog trigger), PricingSwitcher.tsx / PricingBillingContext.tsx (billing toggle).

How to reproduce: in Chrome DevTools → Performance, throttle the CPU (6× slowdown), reload /pricing-cms and click "Buy now" as soon as it appears. Nothing happens until hydration finishes.

Done when (suggested fixes):

  • find what delays hydration of these cards (large client bundle, heavy work before hydration, a Suspense boundary waiting on data) and reduce it
  • or make the controls usable before hydration, e.g. the Monthly/Yearly toggle as links or ?billing=yearly
  • QA note: the tests currently wait for these buttons to hydrate (waitForElementHydration) and mark the Firefox runs as slow. That could be relaxed once this is fixed.
Dominant language
TypeScript
Stars
6
Forks
5
Avg merge
5d 6h
Merged PRs (30d)
7

Getting set up

  • No Dockerfile or Docker Compose file
  • Has a pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from strapi/website

All issues in strapi/website

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.