Skip to content

perf: replace "Loading…" text with skeleton in InvoiceBuilderClient time entries #68

@macwilling

Description

@macwilling

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 build passes

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestsize:SSmall effort

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions