LoadingState

Layout-reserving cold skeletons and delayed refresh progress without remounting content.@gemologic/sheen-patterns · application

Playground

This example has no scalar controls. Its validated source remains interactive below.

Existing orders

<LoadingState label="Orders" phase="refresh" fallback={<Skeleton shape="rectangle" style={{ height: "12rem" }} />}><p>Existing orders</p></LoadingState>

Variant matrix

Refreshing existing content

Existing orders

Anatomy

Package

@gemologic/sheen-patterns

Source

packages/patterns/src/LoadingState.tsx

Tokens

--sheen-color-accent
--sheen-duration-slow

Accessibility

Role: region, progressbarKeyboard: Tab, Shift+Tab

Do

Keep the same component mounted while refreshing.
Supply a layout-matched skeleton and app-owned phase.
Handle errors and accepted data in the app.

Do not

Do not use cold phase for ordinary revalidation.
Do not retain unauthorized data after an account or permission boundary.
Do not put interactive controls in the fallback.

Generated props

Name	Type	Default	Description
`label` *	`string`	—	Required nonempty accessible region name.
`phase` *	`"idle" \| "cold" \| "refresh"`	—	Explicit app-owned idle/cold/refresh phase. Cold hides content; refresh preserves it. Timers begin after hydration or a phase change.
`fallback` *	`JSX.Element`	—	Required noninteractive skeleton matching the app's layout. Cold load reserves its size immediately and reveals it after 200ms.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.