Opening a row on the customers, invoices, verifikat, supplier-invoice,
supplier, article and salary-run lists flashed three unrelated layouts:
the segment's list-shaped loading.tsx (or, for suppliers and articles, the
Hem-shaped dashboard fallback) during the RSC round trip, then the client
page's bare centred spinner in an h-64 box while it fetched, then the
content with a full layout change. Two flashes per click on the most
travelled drill-down path.
- components/common/DetailPageSkeleton.tsx: back link + title row + card
grid + line block, the silhouette of a document/register detail page;
InvoiceEditorSkeleton for the editor routes (same shape the Ny faktura
dialog shows while its chunk loads).
- loading.tsx for every [id] segment (customers, invoices, invoices/edit,
invoices/credit, bookkeeping, supplier-invoices, suppliers, articles,
salary/runs) and for the two list segments that had none (suppliers,
articles, cloned from customers/loading.tsx).
- The client pages render the same skeleton while they fetch instead of
the centred Loader2, so the RSC fallback to client fallback handoff is
invisible. The reference-data gates are already gone (A1 to A6); this
only covers the primary-entity fetch.
- app/(dashboard)/__tests__/detail-loading-states.test.ts pins both.
Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Jakob Wennberg
41424a1650