fix(skeleton): fixed shimmer animation still plays when disableAnimation is true#5916
Merged
Merged
Conversation
🦋 Changeset detectedLatest commit: b363806 The changes in this PR will be included in the next version bump. This PR includes changesets to release 14 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 |
|
@hasegawa-101 is attempting to deploy a commit to the HeroUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
WalkthroughPatch adjusting Skeleton so the shimmer animation respects the Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as Developer / Story
participant Story as Storybook Template
participant Skeleton as Skeleton Component
participant Theme as Themed Variant Config
participant DOM as Rendered Element
Dev->>Story: set args (disableAnimation = true/false)
Story->>Skeleton: render Skeleton with ...args
Skeleton->>Theme: resolve variant for disableAnimation
alt disableAnimation = false
Theme-->>Skeleton: include before:animate-shimmer
else disableAnimation = true
Theme-->>Skeleton: include before:animate-none
end
Skeleton->>DOM: render classes -> (shimmer on/off)
Note over DOM: visual animation reflects variant result
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🧬 Code graph analysis (1)packages/components/skeleton/stories/skeleton.stories.tsx (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
🔇 Additional comments (2)
Tip 📝 Customizable high-level summaries are now available in beta!You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
Example instruction:
Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
@heroui/accordion
@heroui/alert
@heroui/autocomplete
@heroui/avatar
@heroui/badge
@heroui/breadcrumbs
@heroui/button
@heroui/calendar
@heroui/card
@heroui/checkbox
@heroui/chip
@heroui/code
@heroui/date-input
@heroui/date-picker
@heroui/divider
@heroui/drawer
@heroui/dropdown
@heroui/form
@heroui/image
@heroui/input
@heroui/input-otp
@heroui/kbd
@heroui/link
@heroui/listbox
@heroui/menu
@heroui/modal
@heroui/navbar
@heroui/number-input
@heroui/pagination
@heroui/popover
@heroui/progress
@heroui/radio
@heroui/ripple
@heroui/scroll-shadow
@heroui/select
@heroui/skeleton
@heroui/slider
@heroui/snippet
@heroui/spacer
@heroui/spinner
@heroui/switch
@heroui/table
@heroui/tabs
@heroui/toast
@heroui/tooltip
@heroui/user
@heroui/react
@heroui/system
@heroui/system-rsc
@heroui/theme
@heroui/use-aria-accordion
@heroui/use-aria-accordion-item
@heroui/use-aria-button
@heroui/use-aria-link
@heroui/use-aria-modal-overlay
@heroui/use-aria-multiselect
@heroui/use-aria-overlay
@heroui/use-callback-ref
@heroui/use-clipboard
@heroui/use-data-scroll-overflow
@heroui/use-disclosure
@heroui/use-draggable
@heroui/use-form-reset
@heroui/use-image
@heroui/use-infinite-scroll
@heroui/use-intersection-observer
@heroui/use-is-mobile
@heroui/use-is-mounted
@heroui/use-measure
@heroui/use-pagination
@heroui/use-real-shape
@heroui/use-ref-state
@heroui/use-resize
@heroui/use-safe-layout-effect
@heroui/use-scroll-position
@heroui/use-ssr
@heroui/use-theme
@heroui/use-update-effect
@heroui/use-viewport-size
@heroui/aria-utils
@heroui/dom-animation
@heroui/framer-utils
@heroui/react-rsc-utils
@heroui/react-utils
@heroui/shared-icons
@heroui/shared-utils
@heroui/stories-utils
@heroui/test-utils
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/core/theme/src/components/skeleton.ts (1)
63-63: No functional issue found; the component already provides correct defaults through the hook.The
disableAnimationdefault is already handled correctly inpackages/components/skeleton/src/use-skeleton.ts(line 48):const disableAnimation = originalProps.disableAnimation ?? globalContext?.disableAnimation ?? false;Since the component hook always computes and explicitly passes
disableAnimationto the variant (line 52-54), the variant's emptydefaultVariantsis never used in practice. The shimmer animation already plays by default whendisableAnimationis undefined, maintaining backward compatibility.The suggested change to add
defaultVariants: { disableAnimation: false }would be purely cosmetic—it would not affect current behavior but could improve code clarity by making the default explicit at the variant level. This is optional.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
.changeset/tiny-hairs-collect.md(1 hunks)packages/core/theme/src/components/skeleton.ts(1 hunks)
🔇 Additional comments (2)
.changeset/tiny-hairs-collect.md (1)
1-5: LGTM! Changeset properly documents the bug fix.The changeset correctly marks this as a patch-level change and clearly describes the fix for the shimmer animation issue.
packages/core/theme/src/components/skeleton.ts (1)
58-58: Correctly moves shimmer animation to the false variant.This fix properly addresses the Tailwind CSS specificity issue by conditionally applying the shimmer animation only when
disableAnimationisfalse.
AnYiEE
added a commit
to AnYiEE/touhou-mystia-izakaya-assistant
that referenced
this pull request
Nov 20, 2025
wingkwong
approved these changes
Nov 21, 2025
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
2 participants
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.
Closes #5915
📝 Description
Fixed an issue where the skeleton shimmer animation was still playing even when disableAnimation prop was set to true.
⛳️ Current behavior (updates)
The skeleton component's shimmer animation continues to play regardless of the disableAnimation prop value. This happens because before:animate-shimmer was always applied in the base slot, and the variant's before:animate-none couldn't properly override it due to Tailwind CSS class ordering and specificity issues.
🚀 New behavior
When disableAnimation is set to true, the shimmer animation is now completely disabled. The fix moves before:animate-shimmer from the base slot to the disableAnimation: false variant, ensuring proper animation control based on the prop value.
2025-11-19.23.48.15.mov
💣 Is this a breaking change (Yes/No):
No.
📝 Additional Information
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.