Pricing buttons don't respond until the cards hydrate

Abierto
  • ¿Algo no está bien?
#152 0 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 7 días

@fonodi ya está trabajando en esto.

Desde el 9/11/2026.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend, performance

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.
Lenguaje dominante
TypeScript
Estrellas
6
Forks
5
Merge medio
5 d 6 h
PR fusionados (30 d)
7

Preparar el entorno

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de strapi/website

Todos los issues de strapi/website

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.