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 23 minutes and 18 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 ignored due to path filters (1)
📒 Files selected for processing (17)
WalkthroughThe pull request introduces variants to the Spinner Component, enhancing its functionality with new styles and animations. Key changes include the addition of new spinner variants such as dots, gradient, and wave, updates to the component's theme and animation utilities, and enhancements to the documentation. Multiple files across the project have been modified to incorporate new properties, 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
Possibly related PRs
Suggested reviewers
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: a4f5c42 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
There was a problem hiding this comment.
since the new theme changes will be available in the next release (i.e 2.4.7), so please update @heroui/theme in peerDependencies in packages/components/spinner/package.json. Otherwise, the cli upgrade will not bump theme package when upgrading spinner.
i.e.
- "@heroui/theme": ">=2.4.0"
+ "@heroui/theme": ">=2.4.7"
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/components/spinner/stories/spinner.stories.tsx (1)
52-60: Extract common styles to reduce duplication.The
classNamesprop is duplicated across all Spinner instances.Consider extracting the common styles:
const VariantsTemplate = () => { + const commonClassNames = {label: "text-primary-400 mt-4"}; return ( <div className="flex flex-wrap items-end gap-8 py-4"> - <Spinner classNames={{label: "text-primary-400 mt-4"}} label="default" variant="default" /> - <Spinner classNames={{label: "text-primary-400 mt-4"}} label="gradient" variant="gradient" /> - <Spinner classNames={{label: "text-primary-400 mt-4"}} label="star" variant="star" /> - <Spinner classNames={{label: "text-primary-400 mt-4"}} label="dots" variant="dots" /> + <Spinner classNames={commonClassNames} label="default" variant="default" /> + <Spinner classNames={commonClassNames} label="gradient" variant="gradient" /> + <Spinner classNames={commonClassNames} label="star" variant="star" /> + <Spinner classNames={commonClassNames} label="dots" variant="dots" /> <Spinner - classNames={{label: "text-primary-400 mt-4"}} + classNames={commonClassNames} label="dots-blink" variant="dots-blink" /> </div> ); };
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/docs/content/docs/components/spinner.mdx(3 hunks)packages/components/spinner/src/use-spinner.ts(2 hunks)packages/components/spinner/stories/spinner.stories.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/docs/content/docs/components/spinner.mdx
- packages/components/spinner/src/use-spinner.ts
🔇 Additional comments (3)
packages/components/spinner/stories/spinner.stories.tsx (3)
29-34: LGTM! Well-structured variant control.The variant options are properly defined and align with the PR objectives.
49-63: Consider leveraging Storybook controls for variant demonstration.The current implementation hardcodes variants instead of utilizing Storybook's controls.
78-85: LGTM! Well-structured story export.The Variants story follows Storybook's CSF 3.0 format and maintains consistency with other stories.
|
@wingkwong updated the package.json |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/components/spinner/stories/spinner.stories.tsx (1)
49-59: LGTM! Consider extracting variant config.The template effectively showcases all spinner variants. For better maintainability, consider extracting the variant configurations to a constant:
+const SPINNER_VARIANTS = [ + { label: "default", variant: "default" }, + { label: "gradient", variant: "gradient" }, + { label: "star", variant: "star" }, + { label: "dots", variant: "dots" }, + { label: "dots-blink", variant: "dots-blink" }, +] as const; const VariantsTemplate = (args: SpinnerProps) => { return ( <div className="flex flex-wrap items-end gap-8 py-4"> - <Spinner {...args} label="default" variant="default" /> - <Spinner {...args} label="gradient" variant="gradient" /> - <Spinner {...args} label="star" variant="star" /> - <Spinner {...args} label="dots" variant="dots" /> - <Spinner {...args} label="dots-blink" variant="dots-blink" /> + {SPINNER_VARIANTS.map(({ label, variant }) => ( + <Spinner key={variant} {...args} label={label} variant={variant} /> + ))} </div> ); };
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/components/spinner/stories/spinner.stories.tsx(4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: TypeScript
- GitHub Check: Build
🔇 Additional comments (2)
packages/components/spinner/stories/spinner.stories.tsx (2)
5-5: LGTM! Well-typed import statement.The import is correctly typed with SpinnerProps, which is good for maintaining type safety.
74-83: LGTM! Well-structured story export.The Variants story follows Storybook's Component Story Format (CSF) 3.0 and properly applies styling through classNames.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
packages/components/spinner/src/spinner.tsx (1)
12-27: 🛠️ Refactor suggestionReduce code duplication using composition
The variant implementations share common structure (wrapper, elements, label). Consider extracting this into a reusable layout component.
Also applies to: 33-48, 52-58
🧹 Nitpick comments (3)
packages/components/spinner/src/spinner.tsx (1)
14-14: Optimize array creation performanceCreating new arrays on every render is inefficient. Consider memoizing these static arrays.
Apply this diff to optimize the arrays:
+const DOTS_ARRAY = [...new Array(3)]; +const BARS_ARRAY = [...new Array(12)]; const Spinner = forwardRef<"div", SpinnerProps>((props, ref) => { const {slots, classNames, label, variant, getSpinnerProps} = useSpinner({...props}); if (variant === "wave" || variant === "dots") { return ( <div ref={ref} {...getSpinnerProps()}> <div className={slots.wrapper({class: classNames?.wrapper})}> - {[...new Array(3)].map((_, index) => ( + {DOTS_ARRAY.map((_, index) => ( // ... if (variant === "spinner") { return ( <div ref={ref} {...getSpinnerProps()}> <div className={slots.wrapper({class: classNames?.wrapper})}> - {[...new Array(12)].map((_, index) => ( + {BARS_ARRAY.map((_, index) => (Also applies to: 35-35
apps/docs/content/docs/components/spinner.mdx (1)
71-74: Improve clarity in slots documentation.The slots documentation could be clearer about variant-specific slots.
Consider this structure:
- **circle1**: The first circle of the spinner component. (Effective only when variant is `default` or `gradient`) - **circle2**: The second circle of the spinner component. (Effective only when variant is `default` or `gradient`) - **dots**: Dots of the spinner component. (Effective only when variant is `wave` or `dots`) - **spinnerBars**: Bars of the spinner component. (Effective only when variant is `spinner`) + **circle1**: The first circle of the spinner component. + - Only used with variants: `default`, `gradient` + **circle2**: The second circle of the spinner component. + - Only used with variants: `default`, `gradient` + **dots**: The dots element of the spinner component. + - Only used with variants: `wave`, `dots` + **spinnerBars**: The bars element of the spinner component. + - Only used with variant: `spinner`🧰 Tools
🪛 LanguageTool
[uncategorized] ~74-~74: You might be missing the article “the” here.
Context: ...spinner component. (Effective only when variant isspinner) - label: The label co...(AI_EN_LECTOR_MISSING_DETERMINER_THE)
packages/core/theme/src/components/spinner.ts (1)
178-229: Consider consolidating size-specific compound variants.The compound variants for size-specific styles are repetitive across wave and dots variants.
Consider using a helper function to generate size variants:
const generateSizeVariants = (variant: string) => { return ['sm', 'md', 'lg'].map(size => ({ variant, size, class: { wrapper: size === 'lg' ? 'w-12 h-12' : size === 'md' ? 'w-8 h-8' : 'w-5 h-5' } })); }; // Usage in compoundVariants: ...generateSizeVariants('wave'), ...generateSizeVariants('dots'),
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (11)
apps/docs/content/components/spinner/variants.raw.jsx(1 hunks)apps/docs/content/docs/api-references/heroui-provider.mdx(1 hunks)apps/docs/content/docs/components/spinner.mdx(3 hunks)packages/components/spinner/package.json(1 hunks)packages/components/spinner/src/spinner.tsx(1 hunks)packages/components/spinner/src/use-spinner.ts(3 hunks)packages/components/spinner/stories/spinner.stories.tsx(4 hunks)packages/core/system/src/provider-context.ts(2 hunks)packages/core/system/src/provider.tsx(3 hunks)packages/core/system/src/types.ts(1 hunks)packages/core/theme/src/components/spinner.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- packages/components/spinner/package.json
- packages/components/spinner/stories/spinner.stories.tsx
- apps/docs/content/components/spinner/variants.raw.jsx
🧰 Additional context used
🪛 LanguageTool
apps/docs/content/docs/components/spinner.mdx
[uncategorized] ~74-~74: You might be missing the article “the” here.
Context: ...spinner component. (Effective only when variant is spinner) - label: The label co...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
🔇 Additional comments (7)
packages/core/system/src/provider-context.ts (1)
83-87: LGTM! Well-documented prop additionThe spinnerVariant prop is properly typed and documented, following the established pattern in the codebase.
packages/core/system/src/provider.tsx (1)
65-65: LGTM! Consistent provider implementationThe spinnerVariant prop is properly integrated into the provider's context and dependencies.
Also applies to: 89-89, 98-98
packages/components/spinner/src/use-spinner.ts (2)
72-72: LGTM! Return type updated correctly.The return type has been updated to include the new variant property.
42-43: 🛠️ Refactor suggestionConsider adding type safety for variant values.
The variant is extracted from props/context but not validated against allowed values. This could lead to runtime errors if invalid variants are provided.
Add type validation:
+ type SpinnerVariant = 'default' | 'gradient' | 'wave' | 'dots' | 'spinner'; + const isValidVariant = (variant: string): variant is SpinnerVariant => { + return ['default', 'gradient', 'wave', 'dots', 'spinner'].includes(variant); + }; const globalContext = useProviderContext(); - const variant = originalProps?.variant ?? globalContext?.spinnerVariant ?? "default"; + const providedVariant = originalProps?.variant ?? globalContext?.spinnerVariant; + const variant = providedVariant && isValidVariant(providedVariant) + ? providedVariant + : "default";Likely invalid or redundant comment.
apps/docs/content/docs/components/spinner.mdx (1)
103-108: LGTM! Clear API documentation.The variant prop is well documented with all possible values.
apps/docs/content/docs/api-references/heroui-provider.mdx (1)
191-196: LGTM! Provider documentation is clear and complete.The spinnerVariant prop is well documented with its type and possible values.
packages/core/theme/src/components/spinner.ts (1)
165-168: 🛠️ Refactor suggestionAdd reduced motion support for blinking animation.
The dots variant uses blinking animation which may cause discomfort for users with motion sensitivity.
Add reduced motion support:
dots: { wrapper: "translate-y-2/4", - dots: ["animate-blink", "spinner-dot-blink-animation"], + dots: [ + "animate-blink", + "spinner-dot-blink-animation", + "@media (prefers-reduced-motion: reduce) { animation: none; opacity: 0.5; }" + ], },Likely invalid or redundant comment.
macci001
force-pushed
the
feat/v1-spinner-styles
branch
from
26e608d to
80e23c7
Compare
macci001
force-pushed
the
feat/v1-spinner-styles
branch
from
80e23c7 to
a4f5c42
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
spinnerVariantpropDocumentation
Improvements