Pricing buttons don't respond until the cards hydrate

Aperta
  • Qualcosa non va?
#152 0 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 7 giorni

@fonodi ci sta già lavorando.

Dal 9/11/2026.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend, performance

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.
Lingua principale
TypeScript
Stelle
6
Fork
5
Merge medio
5g 6h
PR unite (30g)
7

Preparare l'ambiente

  • Nessun Dockerfile né file Docker Compose
  • Ha un modello di pull request
  • Nessuna guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di strapi/website

Tutte le issue di strapi/website

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.