From afc4c308bb09abd270bfad50e005f380ca9fd13d Mon Sep 17 00:00:00 2001
From: Luan Dias <65574834+luandiasrj@users.noreply.github.com>
Date: Wed, 22 Apr 2026 00:01:14 -0300
Subject: [PATCH] fix: keep play_arrow spinning instead of switching to
 sync/progress_activity (#715)

The sync icon has counter-clockwise arrows by design, making the spin
animation appear counter-clockwise even though CSS rotates clockwise.
Keep play_arrow as the icon in both loading and idle states so the
clockwise spin is visually unambiguous.
---
 .../dashboard/media-providers/[kind]/[id]/page.js         | 6 +++---
 src/app/(dashboard)/dashboard/providers/page.js           | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/page.js b/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/page.js
index 4ddfa5fe..e4d52276 100644
--- a/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/page.js
+++ b/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/page.js
@@ -263,7 +263,7 @@ function EmbeddingExampleCard({ providerId }) {
                 className="flex items-center gap-1.5 px-3 py-1 rounded-lg bg-primary text-white text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 <span className="material-symbols-outlined text-[14px]" style={running ? { animation: "spin 1s linear infinite" } : undefined}>
-                  {running ? "progress_activity" : "play_arrow"}
+                  play_arrow
                 </span>
                 {running ? "Running..." : "Run"}
               </button>
@@ -699,7 +699,7 @@ function TtsExampleCard({ providerId }) {
                   className="flex items-center gap-1.5 px-3 py-1 rounded-lg bg-primary text-white text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   <span className="material-symbols-outlined text-[14px]" style={running ? { animation: "spin 1s linear infinite" } : undefined}>
-                    {running ? "progress_activity" : "play_arrow"}
+                    play_arrow
                   </span>
                   {running ? "Generating..." : "Run"}
                 </button>
@@ -959,7 +959,7 @@ function GenericExampleCard({ providerId, kind }) {
                 className="flex items-center gap-1.5 px-3 py-1 rounded-lg bg-primary text-white text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 <span className="material-symbols-outlined text-[14px]" style={running ? { animation: "spin 1s linear infinite" } : undefined}>
-                  {running ? "progress_activity" : "play_arrow"}
+                  play_arrow
                 </span>
                 {running ? "Running..." : "Run"}
               </button>
diff --git a/src/app/(dashboard)/dashboard/providers/page.js b/src/app/(dashboard)/dashboard/providers/page.js
index 90a4d8d1..d70d9a70 100644
--- a/src/app/(dashboard)/dashboard/providers/page.js
+++ b/src/app/(dashboard)/dashboard/providers/page.js
@@ -267,7 +267,7 @@ export default function ProvidersPage() {
               <span
                 className={`material-symbols-outlined text-[14px]${testingMode === "oauth" ? " animate-spin" : ""}`}
               >
-                {testingMode === "oauth" ? "sync" : "play_arrow"}
+                play_arrow
               </span>
               {testingMode === "oauth" ? "Testing..." : "Test All"}
             </button>
@@ -307,7 +307,7 @@ export default function ProvidersPage() {
             <span
               className={`material-symbols-outlined text-[14px]${testingMode === "free" ? " animate-spin" : ""}`}
             >
-              {testingMode === "free" ? "sync" : "play_arrow"}
+              play_arrow
             </span>
             {testingMode === "free" ? "Testing..." : "Test All"}
           </button>
@@ -356,7 +356,7 @@ export default function ProvidersPage() {
             <span
               className={`material-symbols-outlined text-[14px]${testingMode === "apikey" ? " animate-spin" : ""}`}
             >
-              {testingMode === "apikey" ? "sync" : "play_arrow"}
+              play_arrow
             </span>
             {testingMode === "apikey" ? "Testing..." : "Test All"}
           </button>
@@ -395,7 +395,7 @@ export default function ProvidersPage() {
                 title="Test all Compatible connections"
               >
                 <span className={`material-symbols-outlined text-[14px]${testingMode === "compatible" ? " animate-spin" : ""}`}>
-                  {testingMode === "compatible" ? "sync" : "play_arrow"}
+                  play_arrow
                 </span>
                 {testingMode === "compatible" ? "Testing..." : "Test All"}
               </button>