💸 Perf - Mount the Eventbrite Popup only when it opens

[isaaclombardssw]

Closes #4904

Each Eventbrite CTA mounted a react-responsive-modal Popup unconditionally — the old comment kept it always-mounted so the close animation could play. On the AI for Business Leaders page (blocks 5 and 37, eight EmbeddedCardButtons) that means eight live modal instances at first paint.

Change

components/eventbrite/eventbriteModalButton.tsx now gates the Popup behind a hasOpened flag:

• On initial paint hasOpened is false, so {hasOpened && <Popup />} renders nothing — no react-responsive-modal instance, no portal, no iframe.
• Clicking a CTA sets hasOpened (and open) true, mounting the Popup and playing the enter animation.
• Once opened it stays mounted, so the close transition still runs; the library unmounts the Popup's children while closed, which already resets the widget.

The deferred script load, the "don't stack a second iframe" guard, the script-timeout fallback link, and the eventbrite_order_complete conversion tracking (sendGTMEvent) are all untouched.

This is option 1 from the issue (a "has ever opened" flag), the smallest of the three proposed approaches — no page-level refactor, no dep changes.

Verified

• pnpm lint clean (only the pre-existing z-[2] Tailwind warning).
• npx prettier --check on the changed file clean.
• npx tsc --noEmit reports no errors for this file (remaining project errors are the pre-existing @/tina/client re-export that only the full dev server emits).
• Code trace: with hasOpened false the Popup subtree is not rendered, so no modal DOM or iframe exists until a CTA is clicked; reopening after close re-runs the same open path.

Left for a human

• A quick manual smoke test in a running dev server (open a CTA, complete/close, open a second card) to confirm the animation feel — the full pnpm dev build is memory-heavy in this environment so I verified by code trace and static checks rather than a live click-through.

🤖 Generated with Claude Code

https://claude.ai/code/session_01Q8genJyZboXaa4vgYhJF4P

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🔴	Statements	0.57%	267/46822
🔴	Branches	9.9%	52/525
🔴	Functions	1.27%	6/474
🔴	Lines	0.57%	267/46822

Test suite run success

19 tests passing in 2 suites.

Report generated by 🧪jest coverage report action from ff2add3

[isaaclombardssw]

This is going to be marginal in terms of perf gains, but harmless cleanup

[Copilot]

Pull request overview

This PR improves initial render performance for pages with multiple Eventbrite CTAs by deferring creation of each react-responsive-modal instance until the user actually opens that CTA at least once, while preserving the close animation behavior.

Changes:

• Add a hasOpened (“has ever opened”) state flag to gate rendering of the Popup.
• Update the CTA click handler to set hasOpened and then open the modal.
• Keep the modal mounted after first open so close transitions still run, but avoid mounting any modal/portal DOM on first paint.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.