Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

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.

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

Already on GitHub?Sign in to your account

Closed
Parkreiner wants to merge23 commits intomainfrommes/spinner-fix

Conversation

Parkreiner
Copy link
Member

@ParkreinerParkreiner commentedFeb 7, 2025•
edited
Loading

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

Still WIP

Changes made

  • Updated component API so thatloading is no longer optional. I don't think itever makes sense to have a spinner without a loading state.
  • Added support for delaying when the spinner appears on screen whenloading flips totrue. This can help minimize UI jank during state transitions
  • Added support for defining how the spinnerchildren 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 thechildren prop whenloading toggles betweentrue andfalse

Videos

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

@ParkreinerParkreiner self-assigned thisFeb 7, 2025
@ParkreinerParkreiner changed the titlefix(site): update Spinner to avoid UI edge casesfix(site): update Spinner component to avoid UI edge casesFeb 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
MemberAuthor

Parkreiner commentedFeb 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 reacted with thumbs up emoji

@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.

@BrunoQuaresma
Copy link
Collaborator

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

@github-actionsgithub-actionsbot added the staleThis issue is like stale bread. labelFeb 27, 2025
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Reviewers
No reviews
Assignees

@ParkreinerParkreiner

Labels
staleThis 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
[8]ページ先頭
©2009-2025 Movatter.jp