Page And Region Status

Use this page when a page or region must show Loading, Empty, Error, or Populated after an async fetch (or a post-submit / exception outcome). The industry axis is Empty + Result + Skeleton with a host branch — not a kit-level triad switcher.

Loading is a matrix sibling of Empty and Result (pending / no usable data yet). It is not a third peer status-block product with Empty/Result-like title / description / action / size — compose Skeleton, Spin/Spinner, and Progress instead.

Decision Matrix

Forbidden: Result status="info" (or any Result status) as a substitute for Empty. Do not invent a kit Loading block peer to Empty/Result.

Same Matrix, Different Product Category

Loading shares the async status matrix with Empty and Result, but lands in a different product category:

Forbidden: resurrect AsyncState; invent Loading with Empty/Result-like props as a kit product.

Host Branch Order

The container that owns the async boundary branches explicitly:

if (!hasUsableData && pending)     → Loading (Skeleton; Spin only for exceptions)
else if (!hasUsableData && failed) → Load failure (Result error + Retry)
else if (success && empty)         → Empty
else if (ACL / missing / route)    → Result 403 | 404 | 500
else if (post-submit outcome)      → Result success | error | …
else                               → Populated

Page vs region for Loading: page surfaces replace the content band with a page-shaped skeleton; region surfaces use an in-card / in-panel skeleton (or family loading chrome). Do not wipe an entire app shell unless the wait is a true app lock.

Page Loading Rules

First entry to a page with a predictable layout → page-shaped Skeleton that mirrors the real chrome (title/toolbar, stats or filter band, table/cards/form fields). Never frame-only (shell chrome with an empty content void).

Initial vs refetch vs route remount

• Initial: no usable data → page or region skeleton (or Spin exception above).
• Refetch: keep stale content; subtle progress (e.g. DataList body overlay) — do not wipe the page into skeleton.
• Refetch failure: keep content + inline recovery — never collapse into Empty.
• Route remount: a sibling object-page URL that unmounts the list is not a first visit. If the query cache already has rows, show them. Skeleton only when there is no usable data. Host SPAs keep the list instance mounted (hide + inert); QueryList does not own keep-alive.

Hosts may delay showing loading chrome (~100–400ms). Sub-second flashes of skeleton can feel worse than a brief blank; no dedicated delay component is required.

Page Vs Region

Empty.size and Result.size are "page" | "region" — layout density only, not a product category.

Loading scope is separate: page skeleton vs region skeleton vs fullscreen Spin. Fullscreen Spin is an app-lock exception — it is not an Empty/Result size variant.

Container Placement

size does not place the block in the parent. Do not put flex-1 on Empty / Result by default — that steals leftover height from a page flex column and opens a blank band between siblings. Height-bounded list containers (QueryList / Table fillHeight, Related List body) apply flex-1 themselves. Loading skeleton stays top-aligned.

Do not leave Empty / Result hugging the toolbar in a tall table card. Do not vertically center skeleton rows.

Examples

Page Skeleton — List

First paint for a resource index: toolbar, optional stats band, and table row blocks — not a spinner in a blank card.

"use client";

import { ListPageSkeleton } from "./page-skeletons";

export function PageSkeletonListDemo() {
  return <ListPageSkeleton />;
}

Page Skeleton — Detail Hub

Object Page Hub hydrate: page header, descriptions band, and section cards as a content-band wireframe while the record loads.

"use client";

import { HubPageSkeleton } from "./page-skeletons";

export function PageSkeletonHubDemo() {
  return <HubPageSkeleton />;
}

Page Skeleton — Form

Create/edit first paint mirrors field groups. For the same-instance hydrate path, prefer Form Page loading, which renders a field skeleton and suppresses the footer until values land.

"use client";

import { FormPageShapeSkeleton } from "./page-skeletons";

export function PageSkeletonFormDemo() {
  return <FormPageShapeSkeleton />;
}

Spin Exception

Centered or fullscreen Spin is for unknown shape, honest “working” fallback, or whole-app lock — not the List / Detail Hub / Form CRUD default. Hosts should use the kit component (not a hand-rolled CSS ring).

"use client";

import { PageSpinException } from "./page-skeletons";

export function PageSpinExceptionDemo() {
  return <PageSpinException />;
}

Boundaries

Family empties (DataListEmpty, MessageScrollerEmpty) stay owned by their hosts. Optional internal layout reuse of Empty is a follow-up — not required.

Antipatterns

Citations

• Ant Design Empty; Empty Status research
• Ant Design Result; Result Page; Exception Page
• Ant Design Skeleton; Ant Design Spin
• Nielsen Norman Group — Empty states
• Nielsen Norman Group — Skeleton Screens 101
• Carbon — Empty states
• Carbon — Loading pattern
• Polaris EmptyState

See Also

• Spin — unknown-shape wait, nested refresh overlay, fullscreen app lock
• Empty — successful no-content
• Result — outcomes, exceptions, load failure
• Object Messaging And Table Chrome — Message Popover, cell value state, region toolbar
• Form Page — field skeleton via loading on edit hydrate
• CRUD Page Patterns — list / detail / form surfaces; Edit: Loading the Record
• List Page Statistics — stats band loading alongside list chrome
• Showcases: /showcases/orders-list, /showcases/orders-detail, /showcases/orders-form-edit