quaik8/sbd2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

30
src/components/tts/TTSList.tsx
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>
))}

59
src/components/tts/TTSLoadingStates.tsx
View File

@@ -1,32 +1,61 @@
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table'
import { AlertCircle, Mic, RefreshCw } from 'lucide-react'
export function TTSLoading() {
return (
<div className="space-y-4">
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>Text</TableHead>
<TableHead>Provider</TableHead>
<TableHead>Options</TableHead>
<TableHead>Status</TableHead>
<TableHead>Created</TableHead>
<TableHead className="w-[120px]">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{Array.from({ length: 5 }).map((_, i) => (
<Card key={i}>
<CardContent className="pt-6">
<div className="flex items-start justify-between gap-4">
<div className="flex-1 space-y-2">
<div className="flex items-center gap-2">
<Skeleton className="h-5 w-16" />
<Skeleton className="h-5 w-20" />
</div>
<TableRow key={i}>
<TableCell className="max-w-md">
<Skeleton className="h-4 w-3/4" />
</TableCell>
<TableCell>
<Skeleton className="h-6 w-16" />
</TableCell>
<TableCell>
<div className="flex gap-1">
<Skeleton className="h-4 w-12" />
<Skeleton className="h-4 w-16" />
</div>
<Skeleton className="h-3 w-32" />
<Skeleton className="h-5 w-12" />
<Skeleton className="h-5 w-16" />
</div>
</TableCell>
<TableCell>
<Skeleton className="h-6 w-20" />
</TableCell>
<TableCell>
<Skeleton className="h-4 w-32" />
</TableCell>
<TableCell>
<div className="flex items-center gap-1">
<Skeleton className="h-8 w-8" />
<Skeleton className="h-8 w-8" />
</div>
</CardContent>
</Card>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
)
}

2
src/pages/SoundsPage.tsx
View File

@@ -163,7 +163,7 @@ export function SoundsPage() {
setError(null)
// Determine types to filter by
const types = typeFilter === 'all' ? undefined : [typeFilter]
const types = typeFilter === 'all' ? ['SDB', 'TTS'] : [typeFilter]
const sounds = await soundsService.getSounds({
types,