feat(ux): consistent skeleton loaders across list and detail pages (PMS-353) #250

Merged

nrupard merged 1 commit from feat/pms-353-skeleton-loaders into main

2026-06-17 16:12:42 +02:00

nrupard commented

2026-06-17 16:10:31 +02:00

Owner

What

Makes loading states consistent across the SPA (PMS-353). Adds two shared skeletons matching the existing TableLoading shimmer style and applies them everywhere a page previously rendered bare "Loading…" text.

New components (src/components/skeleton.rs):

CardGridSkeleton - placeholder cards in the projects-list grid shape (grid-cols-1 md:grid-cols-2 lg:grid-cols-3).
DetailSkeleton - a Card of shimmer rows for single-record detail pages.

Converted

Projects list -> CardGridSkeleton (was "Loading projects…").
DetailSkeleton on: contracts (detail x2 + rate card), contacts (company, contact, company-detail body), knowledge_base (article view + edit), billing (invoice), assets (asset), reports (report + builder), projects (project detail), profile, portal (ticket + invoice), settings (scheduling).
Timesheet (a bespoke weekly grid, not the shared Table) -> shimmer rows.

Already covered

Admin/Team render TableLoading on first paint via DataTable, so the reviewer's blank-white-screen case is already handled - no change there. (AC2 verified in code.)

Intentionally left (not page-level list/detail loaders)

Dropdown "Loading…" SelectOptions, transient single-cell fallbacks for sub-resource rows, None-arm header-title "Loading…" fallbacks, and the calendar month / dispatch-board grid views (a Card-shaped skeleton does not fit a calendar grid).

AC mapping

AC1 (Projects skeleton) - done (CardGridSkeleton).
AC2 (Admin/Team skeleton, no blank screen) - already satisfied via DataTable + TableLoading.
AC3 (every list/detail page uses a shared skeleton) - done for table lists (TableLoading, pre-existing), the card-grid list, and all detail pages; carve-outs listed above.
AC4 (visual smoke matches Tickets/Companies) - same shimmer primitive (bg-gray-200 dark:bg-gray-700 rounded animate-pulse) as TableLoading, so the look matches.

The optional lint from proposed approach #3 (flag ad-hoc "Loading…" patterns) is not included - noted as a possible follow-up.

Verification

wasm cargo check, cargo clippy --target wasm32-unknown-unknown --lib -- -D warnings, and cargo fmt --all --check all pass.

#PMS-353

## What Makes loading states consistent across the SPA (PMS-353). Adds two shared skeletons matching the existing `TableLoading` shimmer style and applies them everywhere a page previously rendered bare "Loading…" text. New components (`src/components/skeleton.rs`): - **CardGridSkeleton** - placeholder cards in the projects-list grid shape (`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`). - **DetailSkeleton** - a `Card` of shimmer rows for single-record detail pages. ## Converted - **Projects list** -> CardGridSkeleton (was "Loading projects…"). - **DetailSkeleton** on: contracts (detail x2 + rate card), contacts (company, contact, company-detail body), knowledge_base (article view + edit), billing (invoice), assets (asset), reports (report + builder), projects (project detail), profile, portal (ticket + invoice), settings (scheduling). - **Timesheet** (a bespoke weekly grid, not the shared `Table`) -> shimmer rows. ## Already covered Admin/Team render `TableLoading` on first paint via `DataTable`, so the reviewer's blank-white-screen case is already handled - no change there. (AC2 verified in code.) ## Intentionally left (not page-level list/detail loaders) Dropdown "Loading…" `SelectOption`s, transient single-cell fallbacks for sub-resource rows, `None`-arm header-title "Loading…" fallbacks, and the calendar month / dispatch-board grid views (a Card-shaped skeleton does not fit a calendar grid). ## AC mapping - AC1 (Projects skeleton) - done (CardGridSkeleton). - AC2 (Admin/Team skeleton, no blank screen) - already satisfied via DataTable + TableLoading. - AC3 (every list/detail page uses a shared skeleton) - done for table lists (TableLoading, pre-existing), the card-grid list, and all detail pages; carve-outs listed above. - AC4 (visual smoke matches Tickets/Companies) - same shimmer primitive (`bg-gray-200 dark:bg-gray-700 rounded animate-pulse`) as TableLoading, so the look matches. The optional lint from proposed approach #3 (flag ad-hoc `"Loading…"` patterns) is not included - noted as a possible follow-up. ## Verification wasm `cargo check`, `cargo clippy --target wasm32-unknown-unknown --lib -- -D warnings`, and `cargo fmt --all --check` all pass. #PMS-353

nrupard added 1 commit

2026-06-17 16:10:31 +02:00

feat(ux): consistent skeleton loaders across list and detail pages (PMS-353)

Check / clippy + fmt + tests (pull_request) Successful in 1m52s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

cbb2009354

External review found loading states uneven: Projects showed a plain "Loading projects…" line and several detail pages rendered bare "Loading X…" text while their record fetched. Table lists already use the shared TableLoading skeleton, but it only fits a Table; the card-grid list and the single-record detail pages had no matching component, so they fell back to text.

Add two shared skeletons in src/components/skeleton.rs (same shimmer style as TableLoading): CardGridSkeleton (placeholder cards in the projects-list grid shape) and DetailSkeleton (a Card of shimmer rows for detail pages). Apply them:

- Projects list: CardGridSkeleton instead of the "Loading projects…" line.
- Detail pages -> DetailSkeleton: contracts (detail x2 + rate card), contacts (company, contact, company-detail body), knowledge_base (article view + edit), billing (invoice), assets (asset), reports (report + builder), projects (project detail), profile, portal (ticket + invoice), settings (scheduling).
- Timesheet (a bespoke weekly grid, not the shared Table): shimmer rows in place of the text cell.

Admin/Team already render TableLoading on first paint via DataTable, so the reviewer's blank-screen case is already covered; no change needed there.

Intentionally left as-is (not page-level list/detail loaders): dropdown "Loading…" SelectOptions, transient table-cell fallbacks for sub-resource rows, the None-arm header-title "Loading…" fallbacks, and the calendar month/dispatch-board grid views (a Card-shaped skeleton does not fit a calendar grid).

#PMS-353