refactor: searchbox flash issue and minor improvements #8444
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
👋 Codeowner Review RequestThe following codeowners have been identified for the changed files: Team reviewers: @nodejs/nodejs-website Please review the changes when you have a chance. Thank you! 🙏 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8444 +/- ##
=======================================
Coverage 73.65% 73.65%
=======================================
Files 108 108
Lines 9193 9193
Branches 312 312
=======================================
Hits 6771 6771
Misses 2420 2420
Partials 2 2 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Pull request overview
This PR refactors the search box component to address a flashing issue experienced by dark theme users, likely related to hydration. The changes include moving transition properties to only apply on hover (as a workaround), increasing spacing between the search icon and text, and hiding the keyboard shortcut indicator on mobile devices.
Key changes:
- Restructured hover state to only apply transitions during hover, preventing the flash during initial render
- Improved visual spacing by increasing the gap between icon and text from
gap-1togap-2and addingpl-1 - Made keyboard shortcut (⌘ K) responsive by hiding it on mobile and showing it on medium+ screens
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Let's fast-track to fix this issue. |
3 participants
Description
With this PR, we aim to fix the flashing issue in the search box for users using dark theme. In addition to this fix, I have increased the spacing between the icon and the text, and hide the keyboard shortcut on mobile resolutions since the keyboard is usually not present in most scenarios.
Even if it doesn’t address the root cause, it solves the problem for now. I’ll create a separate issue for the hydration problems, which I believe are the underlying cause 🖖
Validation
There should be no flash in the searchbox in the preview build
Style changes
Before
Default;
On Hover;
On mobile;
After
Default;
On Hover;
On mobile;
Related Issues
Check List
pnpm formatto ensure the code follows the style guide.pnpm testto check if all tests are passing.pnpm buildto check if the website builds without errors.