Import PendingValue, PendingValueAppearance, PendingValueLines, PendingValueWidth from @prepared911/ui/pending-value.
pending
Required boolean. True while the value is on its way: the label shows and the value is hidden from sight, assistive technology and the tab order. False once it has arrived. The host sets data-loading while pending.
label
Required LocalizedMessage. The pending copy, such as "Locating address". It is real text in the document, so assistive technology that reaches the value reads it. It is the visible text unless placeholder is set, and the hidden name of the line in the skeleton appearance.
children
ReactNode. The arrived value. It takes the color and type of the surrounding text and host. Children passed while pending are not shown but still reserve size.
placeholder
ReactNode. A short visible stand-in for label, such as an ellipsis. It is aria-hidden; label is read instead as visually hidden text. Ignored in the skeleton appearance.
announcement
LocalizedMessage. Read once through the shared polite live announcer when pending turns from true to false. Not read on the first render, and not read when a value goes back to pending. Omitted, the arrival is silent.
appearance
PendingValueAppearance: Text (default) or Skeleton. Skeleton renders a Skeleton line named by label.
type
A TextType from PENDING_VALUE_TYPES: Subtitle, SubtitleEmphasis, Body (default), BodyEmphasis, Label, Caption, CaptionEmphasis, Code1, Code2. Page, section, title and overline roles are rejected at compile time.
foreground
Foreground.Subtle (default) or Foreground.Default, from PENDING_VALUE_FOREGROUNDS. It colors the pending label only. Muted, status and accent colors are rejected at compile time.
width
PendingValueWidth: Label, Short, Medium, Long. Inline size kept in both states. Label (the default in the text appearance) is the width of the pending label; Short is 4rem, Medium 8rem, Long 12rem. In the skeleton appearance the default is Medium.
lines
PendingValueLines: One (default), Two, Three. Block size kept in both states, in lines of type.
className, id, ref, data-*
Consumers do not pass className. ref is typed Ref<HTMLElement>. style, role, every aria-* attribute and every on* handler are not accepted: only id and data-* reach the host.
Exports
PendingValue, PendingValueProps, PendingValueLayoutProps, and from the component entry PendingValueAppearance, PendingValueWidth, PendingValueLines, PENDING_VALUE_TYPES, PENDING_VALUE_FOREGROUNDS and their types.
Props
Prop
Default
Meaning
pending
Whether the value is still on its way. While true the pending label shows; when it turns false children swaps in.
label
What assistive technology reads while the value is pending, such as "Locating address". It is real text in the document, so a screen reader that reaches the value hears it instead of a blank. It is also the visible text unless placeholder is set, and the name of the skeleton in the skeleton appearance.
children
The value once it has arrived. It stays out of the accessibility tree and the tab order until pending is false. It takes the surrounding color. Pass Text with value for a number: later changes then roll.
placeholder
Short visible stand-in for label, such as an ellipsis. It is hidden from assistive technology and label is read instead. Ignored in the skeleton appearance, which shows no text.
announcement
Polite announcement read once when the value arrives (pending turns from true to false), such as "Address found". Without it the arrival is silent: the value is plain text and is read when the person reaches it. Not read on the first render.
appearance
How the pending state looks. Defaults to the label as text.
type
Chroma typography role of the label and of the host. Defaults to body (13px).
foreground
Foreground of the pending label. Defaults to subtle. The arrived value takes the surrounding color.
width
Inline size kept in both states. Defaults to the label's width, or to Medium in the skeleton appearance.
lines
Block size kept in both states, in lines of type. Defaults to one.
className
Consumers do not pass className; use props or find-pattern.
id
Element id.
ref
Ref to the rendered element.
Props
Name
Type
Default
Description
label
LocalizedMessage
—
What assistive technology reads while the value is pending, such as "Locating address". It is real text in the
document, so a screen reader that reaches the value hears it instead of a blank. It is also the visible text unless
placeholder is set, and the name of the skeleton in the skeleton appearance.
pending
boolean
—
Whether the value is still on its way. While true the pending label shows; when it turns false children swaps in.
announcement
LocalizedMessage
—
Polite announcement read once when the value arrives (pending turns from true to false), such as "Address found".
Without it the arrival is silent: the value is plain text and is read when the person reaches it. Not read on the
first render.
appearance
PendingValueAppearance
—
How the pending state looks. Defaults to the label as text.
children
ReactNode
—
The value once it has arrived. It stays out of the accessibility tree and the tab order until pending is false.
It takes the surrounding color. Pass Text with value for a number: later changes then roll.
className
string
—
@deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern.
foreground
Foreground.Default | Foreground.Subtle
—
Foreground of the pending label. Defaults to subtle. The arrived value takes the surrounding color.
id
string
—
Element id.
lines
PendingValueLines
—
Block size kept in both states, in lines of type. Defaults to one.
placeholder
ReactNode
—
Short visible stand-in for label, such as an ellipsis. It is hidden from assistive technology and label is read
instead. Ignored in the skeleton appearance, which shows no text.