-
Notifications
You must be signed in to change notification settings - Fork 0
Open
Labels
Description
Problem
In app/(admin)/invoices/new/InvoiceBuilderClient.tsx:314, when the user selects a client the component fetches unbilled time entries and shows:
{loadingEntries ? (
<p className="text-xs text-muted-foreground">Loading…</p>
) : ...}This is a bare text string that jumps to a potentially large list. The layout shift is jarring and gives no structural preview of what's coming.
Fix
Replace the text with a row skeleton that matches the real entry list structure:
{loadingEntries ? (
<div className="rounded-md border border-border divide-y divide-border">
{[1, 2, 3].map((i) => (
<div key={i} className="flex items-center gap-3 px-4 py-2.5">
<div className="h-4 w-4 rounded bg-muted animate-pulse" />
<div className="h-3 flex-1 rounded bg-muted/60 animate-pulse" />
<div className="h-3 w-20 rounded bg-muted/40 animate-pulse" />
<div className="h-3 w-12 rounded bg-muted/40 animate-pulse" />
</div>
))}
</div>
) : ...}Acceptance criteria
- Selecting a client shows a skeleton (not "Loading…" text) while entries load
- Skeleton matches the row structure of the real entry list
-
npm run buildpasses
Reactions are currently unavailable