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.

Standalone

loading state.tsx

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

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

loading-state-example.tsx

<NativeLoadingState loading={loading} variant="skeleton" skeletonRows={3}>
  <ItemList 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	-