Skip to content

πŸ’Έ Perf - Mount the Eventbrite Popup only when it opensΒ #4904

Description

@joshbermanssw

Sub-issue of the AI for Business Leaders performance PBI. Fully isolated.

Description

Blocks 5 and 37 of content/eventsv2/ai-for-business-leaders.json are the same "Pick your city" card carousel, four cards each β€” so eight EmbeddedCardButtons render, each with an eventbriteEventId.

components/eventbrite/eventbriteModalButton.tsx correctly defers the Eventbrite widget script until the user opens a modal β€” that part is well done and should stay. But the Popup itself is mounted unconditionally (the comment notes this is for the close animation), so eight copies of react-responsive-modal plus its global stylesheet are live in the tree at all times.

Proposed solution

  1. Render the Popup only once it has been opened β€” track a "has ever opened" flag so the close animation still plays, but nothing mounts on first paint
  2. Alternatively, hoist a single shared modal to the page level and have the buttons drive it, so eight CTAs cost one modal
  3. Check whether react-responsive-modal's stylesheet can be scoped rather than imported globally

Acceptance criteria

  1. No modal DOM or react-responsive-modal code is mounted on initial page load
  2. Clicking any "Reserve my seat" CTA still opens the Eventbrite checkout, and the open/close animation is unchanged
  3. Opening a second card's checkout after closing the first still works (no stacked iframes)
  4. The existing script-timeout fallback link still appears when the Eventbrite script fails

Metadata

Metadata

Labels

Type: RefactorA code quality improvement e.g. Tech debt

Type

No type

Projects

Status
πŸ€·β€β™‚οΈ Needs Triage

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions