Components
ThinkingIndicator
Unstable: the wait before an AI answer's first word, three stepping dots and a label that can name the step. A polite status region; the dots stop under reduced motion. Import it from @nizivo/react/unstable/thinking-indicator.
Examples
Basic
Before the first word, and naming the step when the assistant knows it.
import type { JSX } from 'react';
import { ThinkingIndicator } from '@nizivo/react/unstable/thinking-indicator';
export function ThinkingIndicatorExample(): JSX.Element {
return (
<div style={{ display: 'grid', gap: 12, justifyItems: 'start' }}>
<ThinkingIndicator />
<ThinkingIndicator>Reading last week’s orders…</ThinkingIndicator>
</div>
);
}
Import
import { ThinkingIndicator } from '@nizivo/react/unstable/thinking-indicator';
// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/thinking-indicator.css';Static or interactive
Server. No client JavaScript: the dots are CSS. How to choose.
Name the step
It says "Thinking…". When the assistant knows what it is doing, say it: children replace the label
(<ThinkingIndicator>Reading last week's orders…</ThinkingIndicator>). Replace the indicator with the
answer once the first words arrive.
Screen readers and motion
The indicator is role="status", so a screen reader announces the label, and each new step, politely.
The dots are decorative. Under reduced motion they stand still and only the label changes.
Props
Server component Renders data-slot="thinking-indicator" with the class nz-thinking-indicator. Props: ThinkingIndicatorProps. Source: src/unstable/thinking-indicator/thinking-indicator.tsx.
| Name | Type | Default | Description |
|---|---|---|---|
labels | Partial<ThinkingIndicatorLabels> | – | Replaces "Thinking…". Children (the step, such as "Reading last week's orders…") win. |
render | RenderProp<Record<string, never>> | – | Must render a |
- Also takes every attribute of
<div>. (ComponentPropsWithRef<"div">)
render takes an element, or, in client code, a function of the props and no state.
Other exports
ThinkingIndicatorLabelstypeimport type { ThinkingIndicatorLabels } from '@nizivo/react/unstable/thinking-indicator'ThinkingIndicator's own strings (§16.4): serialisable, English defaults.
Name Type Default Description labelrequiredstring'Thinking…'The label when the indicator has no children.
ThinkingIndicatorPropstypeimport type { ThinkingIndicatorProps } from '@nizivo/react/unstable/thinking-indicator'The props of
ThinkingIndicator, listed above.
Data attributes and slots
Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.
| Slot | Rendered by | Data attributes |
|---|---|---|
thinking-indicator.nz-thinking-indicator | ThinkingIndicatorroot (takes render) | none |
thinking-indicator-label.nz-thinking-indicator-label | ThinkingIndicatorinner element (CSS only) | none |
CSS hooks
Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.
This stylesheet reads no public hook.
Layers: nz.components. Classes: .nz-thinking-indicator, .nz-thinking-indicator-dot, .nz-thinking-indicator-dots, .nz-thinking-indicator-label.
Tokens this stylesheet reads (9)
--nz-bg-brand, --nz-border-control, --nz-duration-spin, --nz-font-label-m, --nz-radius-full, --nz-space-0-5, --nz-space-1, --nz-space-2, --nz-text-secondary
Accessibility
Nothing in this component takes focus or keyboard input.
Keyboard
None.
ThemeScript
Sets page-level attributes before first paint, so nothing changes once the page has painted: the reader's saved theme (data-nz-theme from localStorage key nz-theme: light, dark or system) and data-nz-platform (apple or other). The rules are on themeScript. Render it in <head> (<head><ThemeScript nonce={nonce} /></head> in a root layout), put the app's default theme on <html> (data-nz-theme="system", or none for light), and put suppressHydrationWarning on <html>, whose attributes the script changes.
Ticker
Unstable: an endless strip of short items that slides slowly, pauses under the pointer or focus, and stands still under Reduced motion. Import it from @nizivo/react/unstable/ticker.