ThinkingIndicator
A working status with an animated icon and rotating visual label.
Installation
Import from the Reflow workspace package.
Playground
Open demoimport { ThinkingIndicator } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<ThinkingIndicator labels={['Thinking…', 'Refining…']} />
</>
)
}Custom labels
import { ThinkingIndicator } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<ThinkingIndicator labels={['Researching', 'Reading', 'Writing']} interval={2500} />
</>
)
}Text only
import { ThinkingIndicator } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<ThinkingIndicator showIcon={false} labels={['Thinking', 'Working']} />
</>
)
}API Reference
Public props for the Reflow implementation. Native controls also accept their standard HTML attributes and Remix event mixes.
ThinkingIndicator
| Prop | Type | Default | Description |
|---|---|---|---|
labels | readonly string[] | — | Status words rotated through the indicator. |
interval | number | 4000 | Time between label changes in milliseconds. |
showIcon | boolean | — | Displays the animated status icon. |