🎨 Palette: Prevent Button layout shift on loading and enhance accessibility#215
🎨 Palette: Prevent Button layout shift on loading and enhance accessibility#215mknoufi wants to merge 1 commit into
Conversation
Co-authored-by: mknoufi <209227354+mknoufi@users.noreply.github.com>
|
👋 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 New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
Qodo reviews are paused for this user.Troubleshooting steps vary by plan Learn more → On a Teams plan? Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center? |
|
CodeAnt AI is reviewing your PR. |
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
codeant-ai
Bot
added
the
size:M
|
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
| {loading && ( | ||
| <ActivityIndicator style={{ position: "absolute" }} color={colors.text} size="small" /> | ||
| )} |
There was a problem hiding this comment.
Suggestion: The loading spinner is absolutely positioned without centering constraints, so it will render at the container origin instead of the button center on loading. Add centering styles (for example full inset + centered alignment, or explicit top/left transform) so the indicator appears where the label was. [css layout issue]
Severity Level: Major ⚠️
- ❌ Database sync buttons show off-center spinner while loading.
- ⚠️ Users see janky layout during Test Connection actions.
- ⚠️ Inconsistent visual alignment across loading button states.Steps of Reproduction ✅
1. Render the `DatabaseSyncStatus` component defined in
`frontend/src/components/DatabaseSyncStatus.tsx:30` so that the action buttons at lines
11–27 (e.g. "Test Connection", "Refresh Status") are visible.
2. Trigger `handleTestConnection` at
`frontend/src/components/DatabaseSyncStatus.tsx:33-43` (for example by tapping the "Test
Connection" button), which sets `loading` state `true` and passes it as the `loading` prop
to the `Button` instances at lines 11–18 and 20–27.
3. When `loading` is true, the shared `Button` component in
`frontend/src/components/ui/Button.tsx` renders the loading indicator at lines 107–109:
`{loading && (<ActivityIndicator style={{ position: "absolute" }} ... />)}` as a sibling
of the text container.
4. Because the `ActivityIndicator` only has `position: "absolute"` with no `top`, `left`,
or centering constraints, it is laid out from the parent `TouchableOpacity`'s origin
(top-left) instead of the visual center, so the spinner appears misaligned relative to the
button label position while loading.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/ui/Button.tsx
**Line:** 107:109
**Comment:**
*Css Layout Issue: The loading spinner is absolutely positioned without centering constraints, so it will render at the container origin instead of the button center on loading. Add centering styles (for example full inset + centered alignment, or explicit top/left transform) so the indicator appears where the label was.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
|
CodeAnt AI finished reviewing your PR. |
1 participant
User description
💡 What: Prevented
Buttonlayout shift during its loading state by preserving the text withopacity: 0instead of unmounting it. Additionally, exposedaccessibilityLabelandaccessibilityHintwhile enforcingaccessibilityRole="button"andaccessibilityState.🎯 Why: Layout shifts during loading cause jarring experiences and accidental misclicks. Icon-only buttons or those with custom labels were previously inaccessible to screen readers because
TouchableOpacitywas missing explicit roles and states.♿ Accessibility:
accessibilityRole="button".accessibilityLabelwith a fallback totitle.accessibilityState={{ disabled: isDisabled, busy: loading }}to correctly announce the button's loading and disabled statuses.PR created automatically by Jules for task 13010360547956550027 started by @mknoufi
CodeAnt-AI Description
Keep button size stable while it is loading and improve screen reader support
What Changed
Impact
✅ Fewer button layout jumps✅ Reduced accidental misclicks during loading✅ Clearer screen reader feedback for buttons💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.