fix(spinner): spinner animation (#5815)

* fix(components/spinner): restore linear rotation (fix #5794)

* fix(spinner): add patch changeset for spinner delay fix

* fix(spinner): restore linear rotation for spinner variant (fix #5794)

* chore: apply Prettier and ESLint fixes to animation util

* chore(theme): lint

* chore(changeset): update msg & add issue number

* chore(changeset): include theme package

* chore(spinner): bump theme peerDependencies

---------

Co-authored-by: WK <wingkwong.code@gmail.com>

.changeset/large-wasps-decide.md

@@ -0,0 +1,6 @@
+---
+"@heroui/spinner": patch
+"@heroui/theme": patch
+---
+
+Fix spinner animation (#5794)

packages/components/spinner/package.json

@@ -38,7 +38,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"
   },
   "dependencies": {
     "@heroui/system-rsc": "workspace:*",

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

@@ -24,7 +24,6 @@ const spinner = tv({
     dots: "relative rounded-full mx-auto",
     spinnerBars: [
       "absolute",
-      "animate-fade-out",
       "rounded-full",
       "w-[25%]",
       "h-[8%]",

packages/core/theme/src/utilities/animation.ts

@@ -1,8 +1,9 @@
 export default {
   /** Animation Utilities */
   ".spinner-bar-animation": {
+    animation: "fade-out 1.2s linear infinite",
     "animation-delay": "calc(-1.2s + (0.1s * var(--bar-index)))",
-    transform: "rotate(calc(30deg * var(--bar-index)))translate(140%)",
+    transform: "rotate(calc(30deg * var(--bar-index))) translate(140%)",
   },
   ".spinner-dot-animation": {
     "animation-delay": "calc(250ms * var(--dot-index))",