Component

Loading state

A wrapper that swaps its children for a spinner, an overlay, or skeleton rows while loading, three variants for three different contexts.

The primitive

loading state.tsx

<NativeLoadingState loading={loading} message="Loading...">
  <NativeRow label="Account" right="Loaded" />
</NativeLoadingState>

Stands in for a transaction list with its skeleton variant while the list itself is still being fetched.

loading-state-example.tsx

<NativeLoadingState loading={loading} variant="skeleton" skeletonRows={3}>
  <TransactionList items={items} />
</NativeLoadingState>

Prop	Type	Description
loadingrequired	boolean	—
variant	"overlay" \| "replace" \| "skeleton"	"overlay" = semi-transparent over content; "replace" = replaces content; "skeleton" = skeleton rows
message	string	—
skeletonRows	number	For skeleton variant: how many rows to show
children	React.ReactNode	—
className	string	—