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.
This commit is contained in:
Luan Dias
2026-04-22 00:01:14 -03:00
committed by GitHub
parent 4b9a955c4b
commit afc4c308bb
2 changed files with 7 additions and 7 deletions

View File

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

View File

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