janpeter/Scrum4Me
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

refactor(PBI-77): standaardiseer loading-skeletons rond shadcn Skeleton (#186)

Browse source 
* refactor(PBI-77): align TaskDialogSkeleton with entity-dialog-layout (T-899)

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>

* refactor(PBI-77): extract BacklogPageSkeleton from 3 identical loadings (T-900)

The loading.tsx files for products/[id], sprint/[sprintId], and
sprint/[sprintId]/planning were 100% identical hand-rolled animate-pulse markup.
Extract the shape into components/loading/backlog-page-skeleton.tsx using the
shadcn <Skeleton> component, and re-export it from the three loading files.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* refactor(PBI-77): dashboard + settings loading on shadcn Skeleton (T-901)

Replace hand-rolled animate-pulse + bg-border divs with the shadcn <Skeleton>
component for consistent bg-muted color and pulse timing across all five
loading.tsx files. No layout-shift: heights, widths, and rounded radii are
preserved.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-05-10 12:59:08 +02:00 • committed by GitHub
parent a0e5867857
commit f8693d126b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 92 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

62
app/_components/tasks/task-dialog-skeleton.tsx
View file

@ -1,5 +1,11 @@
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() {
@ -8,32 +14,54 @@ export function TaskDialogSkeleton() {
<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]',
entityDialogContentClasses,
'[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 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>
{/* 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 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>
{/* 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 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>