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

* 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 <[email protected]>

Author: hasegawa-101

.changeset/tiny-hairs-collect.md

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

packages/components/skeleton/package.json

@@ -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": {

packages/components/skeleton/stories/skeleton.stories.tsx

@@ -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} />

packages/core/theme/src/components/skeleton.ts

@@ -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",
       },
     },