Madhura68
6bdf927fa3
Use entityDialogContentClasses/HeaderClasses/BodyClasses/FooterClasses from components/shared/entity-dialog-layout.ts instead of hand-copied class strings. Header, body, and footer skeletons now mimic the actual TaskDialog form fields (code, title, description, plan, priority, status, delete + cancel/save buttons). Fixes mobile layout-shift: the shared content-classes include max-sm: fullscreen modifiers that the previous hand-rolled subset missed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
import { Skeleton } from '@/components/ui/skeleton'
|
|
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
|
|
import {
|
|
entityDialogBodyClasses,
|
|
entityDialogContentClasses,
|
|
entityDialogFooterClasses,
|
|
entityDialogHeaderClasses,
|
|
} from '@/components/shared/entity-dialog-layout'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export function TaskDialogSkeleton() {
|
|
return (
|
|
<Dialog open>
|
|
<DialogContent
|
|
showCloseButton={false}
|
|
className={cn(
|
|
entityDialogContentClasses,
|
|
'[animation-delay:200ms] [animation-fill-mode:backwards]',
|
|
)}
|
|
>
|
|
<DialogTitle className="sr-only">Taak laden…</DialogTitle>
|
|
|
|
<div className={entityDialogHeaderClasses}>
|
|
<div className="flex items-center gap-2">
|
|
<Skeleton className="h-7 w-40" />
|
|
<Skeleton className="h-5 w-14 rounded-full" />
|
|
</div>
|
|
<Skeleton className="h-4 w-28" />
|
|
</div>
|
|
|
|
<div className={entityDialogBodyClasses}>
|
|
<div>
|
|
<Skeleton className="h-4 w-12 mb-2" />
|
|
<Skeleton className="h-9 w-full" />
|
|
</div>
|
|
<div>
|
|
<Skeleton className="h-4 w-12 mb-2" />
|
|
<Skeleton className="h-14 w-full" />
|
|
</div>
|
|
<div>
|
|
<Skeleton className="h-4 w-24 mb-2" />
|
|
<Skeleton className="h-20 w-full" />
|
|
</div>
|
|
<div>
|
|
<Skeleton className="h-4 w-32 mb-2" />
|
|
<Skeleton className="h-32 w-full" />
|
|
</div>
|
|
<div>
|
|
<Skeleton className="h-4 w-16 mb-2" />
|
|
<Skeleton className="h-9 w-64" />
|
|
</div>
|
|
<div>
|
|
<Skeleton className="h-4 w-12 mb-2" />
|
|
<Skeleton className="h-9 w-48" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className={entityDialogFooterClasses}>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<Skeleton className="h-9 w-28" />
|
|
<div className="flex gap-2">
|
|
<Skeleton className="h-9 w-24" />
|
|
<Skeleton className="h-9 w-24" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|