Skip to content

fix(ui): fix spinner visibility in github issue validation button#698

Merged
Shironex merged 3 commits intov0.14.0rcfrom
feature/bug-github-issue-loader-spinner-is-blended-when-v-wms7
Jan 25, 2026
Merged

fix(ui): fix spinner visibility in github issue validation button#698
Shironex merged 3 commits intov0.14.0rcfrom
feature/bug-github-issue-loader-spinner-is-blended-when-v-wms7

Conversation

@Shironex
Copy link
Copy Markdown
Collaborator

Summary

Fix the GitHub issue loader spinner blending issue where the spinner was not visible in the validation button.

The spinner component in the GitHub issue validation button was blended into the button's primary background color because it used the default primary variant which applies text-primary color - the same as the button's background.

Changed the spinner to use the foreground variant which applies text-primary-foreground for proper contrast against the primary background. This follows the existing pattern already implemented in the worktree panel components.

Changes

  • Modified issue-detail-panel.tsx to use variant="foreground" for the spinner in the validation button
  • This ensures the spinner is visible when displayed inside a button with primary background

Closes

#697

Test Plan

  • Go to GitHub issues view
  • Select an issue
  • Click the Validate button
  • Verify the spinner is now visible with proper contrast against the button background

The spinner component in the GitHub issue validation button was blended
into the button's primary background color, making it invisible. This was
caused by the spinner using the default 'primary' variant which applies
text-primary color, matching the button's background.

Changed the spinner to use the 'foreground' variant which applies
text-primary-foreground for proper contrast against the primary background.
This follows the existing pattern already implemented in the worktree panel
components.

Fixes #697
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jan 25, 2026

Warning

Rate limit exceeded

@Shironex has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 27 minutes and 2 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@gemini-code-assist
Copy link
Copy Markdown
Contributor

Summary of Changes

Hello @Shironex, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request resolves a user interface issue where the loading spinner in the GitHub issue validation button was not adequately visible due to a lack of color contrast. By applying a specific variant to the spinner, the change enhances the visual feedback for users during the validation process, making the UI more intuitive and accessible.

Highlights

  • UI Visibility Fix: The spinner component within the GitHub issue validation button has been updated to use the foreground variant. This change ensures the spinner is clearly visible against the button's primary background color, resolving a previous blending issue.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request addresses a UI bug where the loading spinner in the GitHub issue validation button was not visible. The fix correctly applies the foreground variant to the Spinner component, ensuring it has proper contrast against the button's background. While the change is effective, I've provided a suggestion to refactor the implementation to use the Button component's built-in loading prop. This would simplify the code, improve maintainability, and ensure consistency with the intended usage of the Button component.

Comment thread apps/ui/src/components/views/github-issues-view/components/issue-detail-panel.tsx Outdated
Shironex and others added 2 commits January 25, 2026 14:07
Address PR #698 review feedback from Gemini Code Assist to use the
Button component's built-in loading prop instead of manually rendering
Spinner components.

The Button component already handles spinner display with correct
variant selection (foreground for default/destructive buttons, primary
for others), so this simplifies the code and aligns with component
abstractions.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The Button component internally sets disabled when loading=true, so
explicit disabled props are redundant and can be removed.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@Shironex Shironex merged commit 9587f13 into v0.14.0rc Jan 25, 2026
6 checks passed
@Shironex Shironex deleted the feature/bug-github-issue-loader-spinner-is-blended-when-v-wms7 branch January 25, 2026 13:13
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