mirror of
https://github.com/decolua/9router.git
synced 2026-05-08 12:01:28 +00:00
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:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user