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
- 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
- Alternatively, hoist a single shared modal to the page level and have the buttons drive it, so eight CTAs cost one modal
- Check whether
react-responsive-modal's stylesheet can be scoped rather than imported globally
Acceptance criteria
- No modal DOM or
react-responsive-modal code is mounted on initial page load
- Clicking any "Reserve my seat" CTA still opens the Eventbrite checkout, and the open/close animation is unchanged
- Opening a second card's checkout after closing the first still works (no stacked iframes)
- The existing script-timeout fallback link still appears when the Eventbrite script fails
Sub-issue of the AI for Business Leaders performance PBI. Fully isolated.
Description
Blocks 5 and 37 of
content/eventsv2/ai-for-business-leaders.jsonare the same "Pick your city" card carousel, four cards each β so eightEmbeddedCardButtons render, each with aneventbriteEventId.components/eventbrite/eventbriteModalButton.tsxcorrectly defers the Eventbrite widget script until the user opens a modal β that part is well done and should stay. But thePopupitself is mounted unconditionally (the comment notes this is for the close animation), so eight copies ofreact-responsive-modalplus its global stylesheet are live in the tree at all times.Proposed solution
Popuponly once it has been opened β track a "has ever opened" flag so the close animation still plays, but nothing mounts on first paintreact-responsive-modal's stylesheet can be scoped rather than imported globallyAcceptance criteria
react-responsive-modalcode is mounted on initial page load