From 17829618591d723beea665a7c56d9c45a112e24c Mon Sep 17 00:00:00 2001
From: Vishesh Verma <144326375+Vishesh-Verma-07@users.noreply.github.com>
Date: Mon, 27 Oct 2025 23:29:58 +0530
Subject: [PATCH] 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               | 6 ++++++
 packages/components/spinner/package.json       | 2 +-
 packages/core/theme/src/components/spinner.ts  | 1 -
 packages/core/theme/src/utilities/animation.ts | 3 ++-
 4 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/large-wasps-decide.md

diff --git a/.changeset/large-wasps-decide.md b/.changeset/large-wasps-decide.md
new file mode 100644
index 000000000..99d175134
--- /dev/null
+++ b/.changeset/large-wasps-decide.md
@@ -0,0 +1,6 @@
+---
+"@heroui/spinner": patch
+"@heroui/theme": patch
+---
+
+Fix spinner animation (#5794)
diff --git a/packages/components/spinner/package.json b/packages/components/spinner/package.json
index e1ca0665d..289662ac4 100644
--- a/packages/components/spinner/package.json
+++ b/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:*",
diff --git a/packages/core/theme/src/components/spinner.ts b/packages/core/theme/src/components/spinner.ts
index eb319bb9d..74778baa4 100644
--- a/packages/core/theme/src/components/spinner.ts
+++ b/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%]",
diff --git a/packages/core/theme/src/utilities/animation.ts b/packages/core/theme/src/utilities/animation.ts
index 2437f4329..9ff52ea3f 100644
--- a/packages/core/theme/src/utilities/animation.ts
+++ b/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))",