feat(spinner): new spinner variants #4555
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Warning Rate limit exceeded@macci001 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 10 minutes and 39 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the 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. 📒 Files selected for processing (3)
WalkthroughThe pull request introduces variants to the Spinner Component, expanding its styling and animation capabilities. The changes include adding new spinner styles like dots, star, and gradient variants, updating the component's theme and animation utilities, and enhancing documentation. The modifications affect multiple files across the project, introducing new props, animations, and visual representations of the Spinner Component. Changes
Sequence DiagramsequenceDiagram
participant User
participant SpinnerComponent
participant ThemeUtilities
participant AnimationUtilities
User->>SpinnerComponent: Set variant prop
SpinnerComponent->>ThemeUtilities: Request variant styling
ThemeUtilities->>AnimationUtilities: Fetch animation details
AnimationUtilities-->>SpinnerComponent: Return animation configuration
SpinnerComponent->>User: Render Spinner with selected variant
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
| "to-primary", | ||
| "animate-spinner-linear-spin", | ||
| "[animation-duration:1s]", | ||
| "[-webkit-mask:radial-gradient(closest-side,rgba(0,0,0,0.0)calc(100%-3px),rgba(0,0,0,1)calc(100%-3px))]", |
There was a problem hiding this comment.
The mask creates the hole in the middle of the gradient circle to give the loading spinner effect
| @@ -7,6 +7,35 @@ export interface SpinnerProps extends UseSpinnerProps {} | |||
| const Spinner = forwardRef<"div", SpinnerProps>((props, ref) => { | |||
| const {slots, classNames, label, getSpinnerProps} = useSpinner({...props}); | |||
There was a problem hiding this comment.
Consider refactoring into multiple hooks for different spinner variants since slots are so different
There was a problem hiding this comment.
I think having one hook should be good as we have this pattern for the rest of the components as well.
Any thought here? @jrgarciadev
macci001
force-pushed
the
feat/v1-spinner-styles
branch
from
68e6a71 to
1c79d01
Compare
🦋 Changeset detectedLatest commit: acccb82 The changes in this PR will be included in the next version bump. This PR includes changesets to release 19 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (12)
packages/core/theme/src/components/spinner.ts (4)
25-25: Consider consolidating thebarsslot into a single string.
Having the class definitions spread across an array can be less readable and more error-prone. A single string (or a smaller subset of strings) can improve maintainability and clarity if no dynamic logic is required forbars.Also applies to: 27-27, 29-33
64-65: Ensure consistent color handling fordotsandbars.
Definingbg-*classes for each color is clear but somewhat repetitive. Consider extracting these definitions into a shared utility or applying color classes programmatically to prevent duplication and reduce potential mismatches.Also applies to: 70-71, 76-77, 82-83, 88-89, 94-95, 100-101, 106-107
161-164: Confirm positional updates for thedotsvariant.
Usingtranslate-y-3/4forwrappermight offset the spinner too far from its surrounding context. Please confirm the intended vertical positioning or allow a configurable offset so users can adjust easily.
178-229: Consider programmatic generation forcompoundVariants.
You have multiple items for each size in bothdotsanddots-blink. Generating these compound variants programmatically can reduce repetition, simplify maintenance, and lower the risk of typos.packages/core/theme/src/utilities/animation.ts (2)
3-6: Document the animation timing calculations.The bar animation uses magic numbers (-1.2s, 0.1s) for timing and transformation (30deg, 140%). Consider adding comments explaining these specific values and how they affect the animation.
7-12: Standardize animation timing across variants.The dot animations use different timing bases (250ms vs 200ms) without clear reasoning. Consider standardizing these values or documenting why they differ.
apps/docs/content/components/spinner/variants.raw.jsx (1)
5-14: Extract common props to reduce duplication.The
classNamesprop is repeated across all spinner instances. Consider extracting it to a constant:+ const commonProps = { + classNames: { label: "text-primary-400 mt-4" } + }; <div className="flex flex-wrap items-end gap-8"> - <Spinner classNames={{label: "text-primary-400 mt-4"}} label="default" variant="default" /> + <Spinner {...commonProps} label="default" variant="default" /> // Apply similar changes to other instances </div>packages/components/spinner/src/spinner.tsx (2)
8-29: Consider optimizing array creation and improving type safety
- Replace
[...new Array(3)]withArray.from({length: 3})for better readability and performance.- Consider using a TypeScript enum or union type for variants instead of string literals.
- The wrapper and label code is duplicated across variants.
- const {slots, classNames, label, variant, getSpinnerProps} = useSpinner({...props}); + type SpinnerVariant = 'default' | 'dots' | 'dots-blink' | 'star'; + const {slots, classNames, label, variant, getSpinnerProps} = useSpinner<{variant: SpinnerVariant}>({...props}); if (variant === "dots" || variant === "dots-blink") { return ( <div ref={ref} {...getSpinnerProps()}> <div className={slots.wrapper({class: classNames?.wrapper})}> - {[...new Array(3)].map((_, index) => ( + {Array.from({length: 3}).map((_, index) => (
31-50: Optimize star variant rendering and add validation
- Consider using CSS
transform: rotate()instead of creating 12 separate elements.- Add validation for the bar index to ensure it stays within bounds.
if (variant === "star") { return ( <div ref={ref} {...getSpinnerProps()}> <div className={slots.wrapper({class: classNames?.wrapper})}> - {[...new Array(12)].map((_, index) => ( + {Array.from({length: 12}).map((_, index) => ( <i key={`star-${index}`} className={slots.bars({class: classNames?.bars})} style={ { - "--bar-index": index, + "--bar-index": index % 12, // Ensure index stays within bounds } as React.CSSProperties } />packages/core/theme/src/animations/index.ts (1)
6-8: Enhance animation configuration and performance
- Consider using CSS custom properties for animation timings to allow customization.
- Add easing functions for smoother transitions.
- Use transform: scale() instead of opacity for better performance.
animation: { - sway: "sway 750ms ease infinite", - blink: "blink 1.4s infinite both", - "fade-out": "fade-out 1.2s linear 0s infinite normal none running", + sway: "sway var(--sway-duration, 750ms) cubic-bezier(0.4, 0, 0.2, 1) infinite", + blink: "blink var(--blink-duration, 1.4s) cubic-bezier(0.4, 0, 0.2, 1) infinite both", + "fade-out": "fade-out var(--fade-duration, 1.2s) cubic-bezier(0.4, 0, 0.2, 1) infinite", }, keyframes: { sway: { "0%": { - transform: "translate(0px, 0px)", + transform: "translateY(0)", }, "50%": { - transform: "translate(0px, -150%)", + transform: "translateY(-150%)", }, "100%": { - transform: "translate(0px, 0px)", + transform: "translateY(0)", }, },Also applies to: 73-102
.changeset/clever-pets-arrive.md (1)
1-6: Enhance changeset descriptionThe description should include:
- List of new variants added
- Any breaking changes or migration notes
- Impact on existing implementations
--- "@heroui/spinner": patch "@heroui/theme": patch --- -Adding variants to the Spinner Component. +Adding new variants to the Spinner Component: +- gradient: Uses custom mask for center hole effect +- dots & dots-blink: Implements dot-based loading indicators +- star: Implements rotating bars animation + +Note: Existing implementations using custom slots may need updates +as slot effectiveness now depends on the selected variant.apps/docs/content/docs/components/spinner.mdx (1)
71-74: Improve slots documentation clarityAdd "the" before "component" and consider adding examples for each slot's usage.
-- **circle1**: The first circle of the spinner. (Effective only when variant is `default` or `gradient`) -- **circle2**: The second circle of the spinner. (Effective only when variant is `default` or `gradient`) -- **dots**: Dots of the component. (Effective only when variant is `dots` or `dots-blink`) -- **bars**: Bars of the component. (Effective only when variant is `bars`) +- **circle1**: The first circle of the spinner. (Effective only when variant is `default` or `gradient`) + Example: `<div className={slots.circle1()}>` +- **circle2**: The second circle of the spinner. (Effective only when variant is `default` or `gradient`) + Example: `<div className={slots.circle2()}>` +- **dots**: Dots of the spinner component. (Effective only when variant is `dots` or `dots-blink`) + Example: `<div className={slots.dots()}>` +- **bars**: Bars of the spinner component. (Effective only when variant is `bars`) + Example: `<div className={slots.bars()}>`🧰 Tools
🪛 LanguageTool
[uncategorized] ~74-~74: You might be missing the article “the” here.
Context: ... of the component. (Effective only when variant isbars) - label: The label conte...(AI_EN_LECTOR_MISSING_DETERMINER_THE)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
.changeset/clever-pets-arrive.md(1 hunks)apps/docs/content/components/spinner/index.ts(1 hunks)apps/docs/content/components/spinner/variants.raw.jsx(1 hunks)apps/docs/content/components/spinner/variants.ts(1 hunks)apps/docs/content/docs/components/spinner.mdx(3 hunks)packages/components/spinner/src/spinner.tsx(1 hunks)packages/components/spinner/src/use-spinner.ts(2 hunks)packages/components/spinner/stories/spinner.stories.tsx(2 hunks)packages/core/theme/src/animations/index.ts(2 hunks)packages/core/theme/src/components/spinner.ts(2 hunks)packages/core/theme/src/utilities/animation.ts(1 hunks)packages/core/theme/src/utilities/index.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/docs/content/components/spinner/variants.ts
🧰 Additional context used
🪛 LanguageTool
apps/docs/content/docs/components/spinner.mdx
[uncategorized] ~74-~74: You might be missing the article “the” here.
Context: ... of the component. (Effective only when variant is bars) - label: The label conte...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
🔇 Additional comments (8)
packages/core/theme/src/components/spinner.ts (6)
21-25: Check slot naming and usage consistency.
The introduction oflabel,circle1,circle2, anddotsslots adds variety, but please ensure they are used consistently across the component. For instance, confirm that thelabelslot aligns with user expectations and that no naming conflicts arise if additional slots are added in the future.
42-42: Validate the Tailwind size classes fordots.
The usage ofsize-1,size-1.5,size-2may be non-standard unless configured in Tailwind. Confirm that these classes exist in your custom configuration or rename them for consistent sizing (e.g.w-1.5,h-1.5).Also applies to: 49-49, 56-56
130-147: Review the default variant's border styles and animation durations.
This variant uses both solid and dotted borders, with different animation speeds. Double-check that these visual differences are intentional and that the animations sync up or complement each other for a polished look.
148-160: Check gradient masking for cross-browser compatibility.
The WebKit-specific radial gradient mask may not behave consistently in other browsers. Consider providing a fallback for browsers that do not support-webkit-mask.
169-170: Complete or remove thestarvariant placeholder.
Thestarvariant is empty, which could confuse maintainers or users. If it is a planned feature, consider adding at least a comment or minimal style to indicate its purpose. Otherwise, remove it to avoid dead code.
176-176: Verify the default variant choice.
Setting"default"as yourdefaultVariants.variantis likely fine, but ensure it does not introduce unexpected behavior or break existing usage patterns.packages/core/theme/src/utilities/index.ts (1)
4-10: Validate animation import usage.
Withanimationnow pulled intoutilities, confirm that it does not conflict with existing utility keys and that performance remains acceptable. Also, ensure...animationclasses are fully documented if publicly exposed.apps/docs/content/components/spinner/index.ts (1)
6-14: Ensure documentation covers new variants.
ImportingvariantsintospinnerContentis a good step, but verify that docs clearly describe each new option (dots,dots-blink,gradient, etc.) and provide examples to guide users.
macci001
force-pushed
the
feat/v1-spinner-styles
branch
from
2b2f09e to
acccb82
Compare
Closes #
📝 Description
defaultgradientmaskto create the "hole" in the middle of the spinnerdots,dots-blinkspinner-bars⛳️ Current behavior (updates)
🚀 New behavior
Screen.Recording.2025-01-14.at.00.16.12.mp4
💣 Is this a breaking change (Yes/No):
📝 Additional Information
Summary by CodeRabbit
New Features
Documentation
Improvements