42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import { Skeleton } from '@/components/ui/skeleton'
|
|
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export function TaskDialogSkeleton() {
|
|
return (
|
|
<Dialog open>
|
|
<DialogContent
|
|
showCloseButton={false}
|
|
className={cn(
|
|
'flex flex-col p-0 gap-0',
|
|
'max-h-[90vh] w-full max-w-[calc(100%-2rem)]',
|
|
'sm:max-w-[90vw] sm:max-h-[85vh]',
|
|
'lg:max-w-[50vw] lg:min-w-[480px]',
|
|
'[animation-delay:200ms] [animation-fill-mode:backwards]',
|
|
)}
|
|
>
|
|
<DialogTitle className="sr-only">Taak laden…</DialogTitle>
|
|
|
|
{/* Header */}
|
|
<div className="px-6 pt-5 pb-4 border-b border-outline-variant shrink-0">
|
|
<Skeleton className="h-7 w-40" />
|
|
</div>
|
|
|
|
{/* Body — 3 bars mimicking title + description + plan */}
|
|
<div className="flex-1 px-6 py-6 space-y-6">
|
|
<Skeleton className="h-14 w-full" />
|
|
<Skeleton className="h-24 w-full" />
|
|
<Skeleton className="h-32 w-full" />
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="border-t border-outline-variant px-6 py-4 shrink-0">
|
|
<div className="flex justify-end gap-2">
|
|
<Skeleton className="h-8 w-24" />
|
|
<Skeleton className="h-8 w-24" />
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|