Skip to content

fix(site): update Spinner component to avoid UI edge cases #16497

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.

Sign up for GitHub

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

Jump to bottom
Closed
wants to merge 23 commits into from
Closed

fix(site): update Spinner component to avoid UI edge cases #16497

wants to merge 23 commits into from
+164 −49

Conversation

Parkreiner
Copy link
Member

@Parkreiner Parkreiner commented Feb 7, 2025 •
edited
Loading

No issue to link – spurred by some of the conversations in #16098

Still WIP

Changes made

  • Updated component API so that loading is no longer optional. I don't think it ever makes sense to have a spinner without a loading state.
  • Added support for delaying when the spinner appears on screen when loading flips to true. This can help minimize UI jank during state transitions
  • Added support for defining how the spinner children prop is hidden (hiding the content via CSS vs unmounting the component entirely)
  • Cleaned up code in general, to make sure that there are fully-dependent links between constants and the rest of the UI, and also to minimize how often values are reconstructed on re-renders
  • Made sure that by default, state isn't wiped for the children prop when loading toggles between true and false

Videos

(Todo: Fill these in when the PR is done)

@Parkreiner Parkreiner self-assigned this Feb 7, 2025
@Parkreiner Parkreiner changed the title fix(site): update Spinner to avoid UI edge cases fix(site): update Spinner component to avoid UI edge cases Feb 8, 2025
@matifali
Copy link
Member

@Parkreiner @BrunoQuaresma Does it solve the following issue?
Notice the weird spinning on the workspace proxy drop-down button.

Screen.Recording.2025-02-17.at.14.55.16.mov

@Parkreiner
Copy link
Member Author

Parkreiner commented Feb 19, 2025 •
edited
Loading

@Parkreiner @BrunoQuaresma Does it solve the following issue? Notice the weird spinning on the workspace proxy drop-down button.

Screen.Recording.2025-02-17.at.14.55.16.mov

I'm guessing you're talking about the "boomerang" animation where the circle isn't perfectly centered as it rotates? In which case, no. This is basically a "pet project" PR I started because there was some known buggy behavior that we were okay with shipping with #16098. I promised I'd be able to fix those problems later, and this PR is basically a "brain break" between my other tickets

Basically, the PR is more concerned with runtime behavior for HTML/JavaScript/UX. I'd want to put the animation fix in a separate PR, because while it looks wonky, it doesn't produce invalid HTML or cause UI flickering

@matifali
Copy link
Member

Yes I am talking about the non centered spinner animation.

If this OR doesn't address that, I am happy to extract that to a sperate issue.

@matifali matifali mentioned this pull request Feb 19, 2025
Closed
@BrunoQuaresma
Copy link
Collaborator

@Parkreiner this Spinner component was based on the Radix Spinner including the API https://www.radix-ui.com/themes/docs/components/spinner

@github-actions github-actions bot added the stale This issue is like stale bread. label Feb 27, 2025
@github-actions github-actions bot closed this Mar 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@Parkreiner Parkreiner

Labels
stale This issue is like stale bread.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@Parkreiner @matifali @BrunoQuaresma