Skip to content

fix: eliminate hover lag in P3 color grid (zero rerender tooltip) #2295

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

Austin1serb
Copy link

Fix tooltip lag in P3 color grid by removing React rerenders

Closes #2293

Replaces the React state tooltip in the homepage P3 color grid with a zero-rerender pattern based on a minimal, inlined build of React Zero-UI.

Improvements

Metric Before After Delta
FPS (Chrome) ~15–20 60 steady +40–45
React rerenders Many 0 –100 %
First-load JS (“/” route) 21.1 kB 19.8 kB -1.3 kB

How it works

  • Adds createZeroUI (7 LOC) to mutate a scoped data-tooltip attribute.
  • Declares a single Tailwind v4 @variant tooltip-on rule in global CSS.
  • Fully self-contained—no new npm dependencies.

Preview

Live demo → Vercel link

Happy to tweak anything you need. Thanks for the review!

Copy link

vercel bot commented Jun 26, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
tailwindcss-com ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 26, 2025 0:05am

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Performance Issue: Significant lag in homepage P3 color grid tooltip due to React rerenders (with measured fix)
1 participant