What problem does it solve?
Entity detail pages in Saleor Dashboard often flash wrong defaults—selected radios, fake metrics, or form values—before async GraphQL data resolves, causing layout jumps and misleading UI. This Skill defines rules for building loading states that mirror the final layout without inventing data.
Core Features & Use Cases
- Indicator selection guidance: Choose between Skeleton, Spinner, LoadingDots, and EmptyState based on whether the layout shape is known and whether the query returned data.
- Page vs region loading: Gate the entire Form until the primary entity loads, then use in-card skeletons for secondary queries like voucher code pagination.
- Anti-pattern prevention: Avoid fake selected defaults, premature type-dependent nav, full-page spinners for known grids, and skeletons shown forever on empty results.
- Use Case: When building a new discount detail page, apply the checklist to gate the Form with
key={entity.id}, render a *DetailsPageLoading shell matching the final grid, and wrap loading regions in aria-busy.
Quick Start
Ask the AI to add a loading skeleton shell to a Saleor Dashboard detail page following the saleor-dashboard-loading rules so no default form values flash before data loads.
