Bart/9router
1
0
Fork 0
mirror of https://github.com/decolua/9router.git synced 2026-05-08 12:01:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: keep play_arrow spinning instead of switching to sync/progress_activity (#715)

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/page.js
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" 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}> <span className="material-symbols-outlined text-[14px]" style={running ? { animation: "spin 1s linear infinite" } : undefined}>
{running ? "progress_activity" : "play_arrow"} play_arrow
</span> </span>
{running ? "Running..." : "Run"} {running ? "Running..." : "Run"}
</button> </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" 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}> <span className="material-symbols-outlined text-[14px]" style={running ? { animation: "spin 1s linear infinite" } : undefined}>
{running ? "progress_activity" : "play_arrow"} play_arrow
</span> </span>
{running ? "Generating..." : "Run"} {running ? "Generating..." : "Run"}
</button> </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" 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}> <span className="material-symbols-outlined text-[14px]" style={running ? { animation: "spin 1s linear infinite" } : undefined}>
{running ? "progress_activity" : "play_arrow"} play_arrow
</span> </span>
{running ? "Running..." : "Run"} {running ? "Running..." : "Run"}
</button> </button>

8
src/app/(dashboard)/dashboard/providers/page.js
View File

@@ -267,7 +267,7 @@ export default function ProvidersPage() {
<span <span
className={`material-symbols-outlined text-[14px]${testingMode === "oauth" ? " animate-spin" : ""}`} className={`material-symbols-outlined text-[14px]${testingMode === "oauth" ? " animate-spin" : ""}`}
> >
{testingMode === "oauth" ? "sync" : "play_arrow"} play_arrow
</span> </span>
{testingMode === "oauth" ? "Testing..." : "Test All"} {testingMode === "oauth" ? "Testing..." : "Test All"}
</button> </button>
@@ -307,7 +307,7 @@ export default function ProvidersPage() {
<span <span
className={`material-symbols-outlined text-[14px]${testingMode === "free" ? " animate-spin" : ""}`} className={`material-symbols-outlined text-[14px]${testingMode === "free" ? " animate-spin" : ""}`}
> >
{testingMode === "free" ? "sync" : "play_arrow"} play_arrow
</span> </span>
{testingMode === "free" ? "Testing..." : "Test All"} {testingMode === "free" ? "Testing..." : "Test All"}
</button> </button>
@@ -356,7 +356,7 @@ export default function ProvidersPage() {
<span <span
className={`material-symbols-outlined text-[14px]${testingMode === "apikey" ? " animate-spin" : ""}`} className={`material-symbols-outlined text-[14px]${testingMode === "apikey" ? " animate-spin" : ""}`}
> >
{testingMode === "apikey" ? "sync" : "play_arrow"} play_arrow
</span> </span>
{testingMode === "apikey" ? "Testing..." : "Test All"} {testingMode === "apikey" ? "Testing..." : "Test All"}
</button> </button>
@@ -395,7 +395,7 @@ export default function ProvidersPage() {
title="Test all Compatible connections" title="Test all Compatible connections"
> >
<span className={`material-symbols-outlined text-[14px]${testingMode === "compatible" ? " animate-spin" : ""}`}> <span className={`material-symbols-outlined text-[14px]${testingMode === "compatible" ? " animate-spin" : ""}`}>
{testingMode === "compatible" ? "sync" : "play_arrow"} play_arrow
</span> </span>
{testingMode === "compatible" ? "Testing..." : "Test All"} {testingMode === "compatible" ? "Testing..." : "Test All"}
</button> </button>