Skip to content

⚡ Bolt: cache matchMedia to avoid re-parsing inside event listeners#1135

Merged
github-actions[bot] merged 1 commit intomasterfrom
bolt-cache-matchmedia-7981482606098342877
Mar 26, 2026
Merged

⚡ Bolt: cache matchMedia to avoid re-parsing inside event listeners#1135
github-actions[bot] merged 1 commit intomasterfrom
bolt-cache-matchmedia-7981482606098342877

Conversation

@kuasar-mknd
Copy link
Copy Markdown
Owner

💡 What: Moved the window.matchMedia("(prefers-reduced-motion: reduce)") evaluation out of event listeners for the skip-link and back-to-top buttons in src/layouts/Base.astro. The MediaQueryList object is now cached, and its .matches property is read dynamically within the listener callbacks.

🎯 Why: Evaluating media queries (string parsing) repeatedly inside high-frequency event handlers like clicks causes unnecessary overhead. Caching the MediaQueryList avoids this performance bottleneck. As an added benefit, dynamically checking the .matches property accurately reflects user preference changes without needing to reload the page, which fixes a subtle bug where the original implementation stored a static boolean value.

📊 Impact: Reduces browser main-thread overhead by skipping repeated matchMedia string parsing on UI interactions.

🔬 Measurement: Verifiable by testing tactile feedback interactability and checking event listeners in the DOM to ensure window.matchMedia is only called once per component initialization. No regressions found via automated validations (pnpm run check and bun test src/ tests/).


PR created automatically by Jules for task 7981482606098342877 started by @kuasar-mknd

@google-labs-jules
Copy link
Copy Markdown
Contributor

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

@github-actions github-actions bot enabled auto-merge (squash) March 26, 2026 12:49
@github-actions github-actions bot merged commit d4b5de3 into master Mar 26, 2026
7 checks passed
@github-actions github-actions bot deleted the bolt-cache-matchmedia-7981482606098342877 branch March 26, 2026 12:55
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.

1 participant