Fix UI confusion between buttons and hydration state indicators (Issue #2)#3
Fix UI confusion between buttons and hydration state indicators (Issue #2)#3shujanislam wants to merge 1 commit intoethanniser:mainfrom
Conversation
|
@shujanislam is attempting to deploy a commit to the ethanniser Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Pull request overview
This PR updates the hydration demo UI so that interactive buttons and non-interactive hydration state indicators are visually distinct, improving clarity per Issue #2 without changing the underlying hydration logic.
Changes:
- Restyled the
HydrationIndicatorcomponents on both the input and auth pages to use pill-style, non-button alert/badge visuals. - Added Tailwind
hover:bg-*classes to auth-related buttons to provide clearer interactivity feedback. - Kept all hydration logic intact while refining the presentation of state indicators and controls.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
src/app/input/page.tsx |
Updates HydrationIndicator styling to a non-interactive badge-style indicator using Tailwind utility classes. |
src/app/auth/page.tsx |
Adds hover styles to sign-in/sign-out buttons and updates HydrationIndicator to the new badge-style visuals; note that the JSX SigninButton class now differs from the inline-script-created button, which can introduce a hydration mismatch. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| function SigninButton() { | ||
| return ( | ||
| <button className="bg-blue-500 text-white p-2 rounded-md">Sign in</button> | ||
| <button className="bg-blue-500 text-white p-2 rounded-md hover:bg-blue-700">Sign in</button> |
There was a problem hiding this comment.
By adding hover:bg-blue-700 to the SigninButton component’s className, this JSX-rendered button no longer matches the button created in the inline script above (which still uses "bg-blue-500 text-white p-2 rounded-md" without the hover class). This breaks the assumption that the inline DOM seeding produces markup identical to what React will render, which can introduce a subtle hydration mismatch (and visibly different hover behavior before vs. after hydration). To keep the hydration demo accurate and avoid mismatches, consider updating the script-created button’s class string to include the same hover class (or extracting a shared constant used by both the script and SigninButton).
| <button className="bg-blue-500 text-white p-2 rounded-md hover:bg-blue-700">Sign in</button> | |
| <button className="bg-blue-500 text-white p-2 rounded-md">Sign in</button> |
Fixes #2.
This PR resolves the UI confusion described in Issue #2 by clearly distinguishing interactive buttons from non-interactive hydration state indicators in the hydration demo.
Summary of changes
Updated hydration state indicators to use a non-button visual style
Added hover to buttons to improve interactivity feedback
Improved visual clarity without changing any hydration logic or behavior
Result
Users can now easily tell which elements are clickable and which are informational, making the hydration behavior easier to understand and improving the overall UX of the demo.
Before
After