feat(spinner): Redraw the spinner as a growing arc that fades in after a delay (v1.8.7) - #68
Open
woody-uiux wants to merge 1 commit into
Open
woody-uiux wants to merge 1 commit into
woody-uiux wants to merge 1 commit into
Conversation
…r a delay (v1.8.7) Spinner now draws its own svg: an arc that grows and shrinks while it rotates, 1.8s per turn. It waits 700ms before fading in, so short loads never show it. The registry item drops @tabler/icons-react and ships the spinner-dash keyframes. The loading toast uses Spinner in place of IconLoader, and the toast registry item depends on spinner. The input-group-spinner example and every stepper example with a loading indicator use Spinner as well. Claude-Session: https://claude.ai/code/session_019isyjuLsrQsjbTbmuXPGc2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
스피너 검수 결과를 반영했습니다.
바뀐 것
Spinner가IconLoader대신 직접svg를 그립니다. 원 위의 호가 늘었다 줄었다 하며 돌고, 한 바퀴에1.8s입니다.Spinner가700ms기다린 뒤300ms에 걸쳐 나타납니다(starting:opacity-0). 그 안에 끝나는 로딩에서는 보이지 않습니다.app/globals.css의@theme inline에--animate-spinner-dash와@keyframes spinner-dash를 넣었습니다.함께 바꾼 것
loading토스트가IconLoader대신Spinner를 씁니다. 모양과 늦게 나타나기가 스피너와 같습니다.input-group-spinner예시와 문서,loading표시가 있는stepper예시 9개와 문서가Spinner를 씁니다.레지스트리
spinner항목이@tabler/icons-react의존성을 빼고,cssVars.theme의animate-spinner-dash와css의@keyframes spinner-dash를 싣습니다.toast항목의registryDependencies에@ondo-ui/spinner를 더했습니다.건드리지 않은 것
기본 크기(
size-4),stroke-width(2), 색(currentColor)은 그대로 뒀습니다.확인한 것
tsc,eslint,bun test(131개),registry:build, 등록 검사 스크립트(spinner,toast) 통과0.7s뒤에 스피너가 나타나고, 0.5초 걸리는 토스트에서는 나타나지 않는 것을 브라우저에서 확인