Pending Value

PendingValue stands in for a value that is not final yet: an address still being located, a count still being computed, a status that has not been reported. The call-taker sees a placeholder, and when the value arrives it swaps in the same place with a short crossfade and nothing around it moves. It is not the other two placeholders a value can have: label is required copy. It is the visible text while pending and what a screen reader reads. pending says whether the value has arrived. When pending turns false the children swap in place. A value that arrives but turns out to be empty is not pending any more. Render the empty state yourself so the three cases stay distinct: The host stacks the label and the value in one grid cell, so it is as large as the larger of the two and the swap never resizes it. Two props set a floor when the value will be bigger than the label: Children passed while pending is true are not shown, but they still take up space. Pass the previous value while a refresh is in flight and the host keeps its exact size. The default is the label as text in the subtle foreground. Pass appearance={PendingValueAppearance.Skeleton} to show a Skeleton line instead; the label is then read by assistive technology but not shown, and width defaults to Medium because there is no text to measure. Use the skeleton appearance where the surrounding list already reads as a loading placeholder. placeholder replaces the visible text with a short stand-in, such as an ellipsis, while label is still what is read. It has no effect in the skeleton appearance. type sets the role of the label and of the arrived value together (default BodyMedium, the role of DataList values and of EmptyText). Pass the role of the text around the value, Code1 in a mono list for example, so the label and the value share a line height. foreground colors only the pending label (default Subtle); the arrived value takes the color of the surrounding text. Put a number in the value with Text and value, and set foreground={Foreground.Inherit}: The first arrival is the crossfade, because a pending label has no digits to roll from. Later changes of units roll through Text's odometer. By default the arrival is silent: the value is plain text and a screen reader reads it when the person reaches it. Pass announcement for a value the person is waiting on, such as an address that unlocks dispatch: It is read once, politely, when pending turns from true to false, and never on the first render. PendingValue is an inline span, so it goes anywhere a value goes: as the children of a DataListValue, in a card row, or in a sentence. Match type to the surrounding role. Load @prepared911/ui/text/styles.css and @prepared911/ui/pending-value/styles.css. The skeleton appearance also needs @prepared911/ui/skeleton/styles.css, and placeholder needs @prepared911/ui/visually-hidden/styles.css.