feat: enhance loading states with table structure and improve sound type filtering in SoundsPage

This commit is contained in:
JSC
2025-09-21 18:17:55 +02:00
parent 41659c9299
commit 1d2c27abbd
3 changed files with 78 additions and 21 deletions

View File

@@ -176,7 +176,35 @@ export function TTSList() {
{Array.from({ length: 5 }).map((_, i) => (
<Card key={i}>
<CardContent className="pt-6">
<Skeleton className="h-20 w-full" />
<div className="flex items-start justify-between gap-4">
<div className="flex-1 space-y-2">
{/* Badges row */}
<div className="flex items-center gap-2">
<Skeleton className="h-6 w-16" />
<Skeleton className="h-6 w-20" />
</div>
{/* Text content */}
<div className="space-y-1">
<Skeleton className="h-4 w-3/4" />
<div className="flex gap-1">
<Skeleton className="h-5 w-12" />
<Skeleton className="h-5 w-16" />
</div>
</div>
{/* Date and metadata */}
<div className="flex items-center gap-4">
<Skeleton className="h-3 w-32" />
<Skeleton className="h-3 w-20" />
</div>
</div>
{/* Play button */}
<div className="flex items-center gap-2">
<Skeleton className="h-8 w-8 rounded" />
</div>
</div>
</CardContent>
</Card>
))}