archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(skeleton): fixed shimmer animation still plays when disableAnimation is true (#5916)

Browse Source 
* fix(skeleton): restore shimmer animation for background transition

* chore: changeset

* chore(skeleton): bump theme peer dep

* chore(skeleton): pass args to first skeleton

* chore(changeset): bump skeleton

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>
This commit is contained in:
Hayato Hasegawa 2025-11-21 16:18:27 +09:00 committed by GitHub
parent 8921dc4361
commit bc4c982609
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/tiny-hairs-collect.md Normal file
View File

@ -0,0 +1,6 @@
---
"@heroui/theme": patch
"@heroui/skeleton": patch
---
fixed skeleton shimmer animation not respecting disableAnimation prop (#5915)

2
packages/components/skeleton/package.json
View File

@ -36,7 +36,7 @@
"peerDependencies": {
"react": ">=18 || >=19.0.0-rc.0",
"react-dom": ">=18 || >=19.0.0-rc.0",
"@heroui/theme": ">=2.4.17",
"@heroui/theme": ">=2.4.23",
"@heroui/system": ">=2.4.18"
},
"dependencies": {

2
packages/components/skeleton/stories/skeleton.stories.tsx
View File

@ -56,7 +56,7 @@ const DefaultTemplate = (args: SkeletonProps) => (
const StandaloneTemplate = (args: SkeletonProps) => (
<div className="max-w-[300px] w-full flex items-center gap-3">
<div>
<Skeleton className="flex rounded-full w-12 h-12" />
<Skeleton className="flex rounded-full w-12 h-12" {...args} />
</div>
<div className="w-full flex flex-col gap-2">
<Skeleton className="h-3 w-3/5 rounded-lg" {...args} />

3
packages/core/theme/src/components/skeleton.ts
View File

@ -25,7 +25,6 @@ const skeleton = tv({
"before:absolute",
"before:inset-0",
"before:-translate-x-full",
"before:animate-shimmer",
"before:border-t",
"before:border-content4/30",
"before:bg-gradient-to-r",
@ -56,7 +55,7 @@ const skeleton = tv({
content: "transition-none",
},
false: {
base: "transition-background !duration-300",
base: "before:animate-shimmer transition-background !duration-300",
content: "transition-opacity motion-reduce:transition-none !duration-300",
},
},