Skip to content

Animate reload icon #13894

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Animate reload icon #13894

wants to merge 1 commit into from

Conversation

BKM14
Copy link
Contributor

@BKM14 BKM14 commented Aug 13, 2025

Closes #13864

Added a 0deg to 90deg transform for IconReload with a 250ms duration.

Adding a loom recording:
Recording

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

Greptile Summary

This PR adds a hover animation to the reload icon in the role permissions settings page. The change implements a 90-degree rotation animation that triggers on hover with a 250ms duration using Emotion's keyframes and styled components.

The implementation creates a spin keyframe animation that rotates from 0 to 90 degrees, then wraps the existing IconReload component in a StyledIconReload styled component that applies the animation on hover. This change is scoped specifically to the OverridableCheckbox component in the role permissions section, so it won't affect other uses of IconReload throughout the application.

The solution follows the codebase's existing patterns by using Emotion for CSS-in-JS styling, which is consistent with the project's styling approach. The animation provides better visual feedback for users when interacting with the reload functionality in role permissions settings, addressing the static nature of the previous implementation.

Confidence score: 5/5

  • This PR is extremely safe to merge with no risk of breaking functionality
  • Score reflects a simple, well-contained UI enhancement with proper implementation patterns
  • No files require special attention as this is a straightforward styling change

1 file reviewed, no comments

Edit Code Review Bot Settings | Greptile

Copy link
Contributor

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:37163

This environment will automatically shut down when the PR is closed or after 5 hours.

@Weiko Weiko self-requested a review August 14, 2025 13:59
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.

Animate restore icon on hover
1 participant