feat: enhance loading states with table structure and improve sound type filtering in SoundsPage
This commit is contained in:
@@ -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>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user