Skip to content
Highlight

ComponentsUpdated Sep 9, 2026

Loading State

A spinner with cycling status messages. The text crossfades between messages so a long wait still feels alive.

Import

Source: packages/ui/src/components/loading-state

tsx
import { LoadingState } from '@highlight/ui'

Playground

Change the props; the preview and the snippet update together.

Checking for actions…
Props
2000
Shimmer
Spinner
tsx
<LoadingState>  <LoadingState.Spinner />  <LoadingState.Text messages={['Checking for actions…', 'Reviewing your tasks…', 'Almost there…']} /></LoadingState>

Basic

Checking for actions…
tsx
import { LoadingState } from '@highlight/ui' export default function LoadingStateBasic() {  return (    <LoadingState>      <LoadingState.Spinner />      <LoadingState.Text messages={['Checking for actions…', 'Reviewing your tasks…', 'Almost there…']} />    </LoadingState>  )}

Parts on their own

Spinner and Text work standalone. interval sets the cycle; shimmer toggles the sheen.

Thinking…
Summarizing
tsx
import { LoadingState } from '@highlight/ui' export default function LoadingStateParts() {  return (    <div className="flex flex-col items-start gap-4">      <LoadingState.Spinner className="size-6" />      <LoadingState.Text messages={['Thinking…']} shimmer={false} />      <LoadingState className="gap-3">        <LoadingState.Spinner className="size-5" />        <LoadingState.Text          messages={['Summarizing', 'Extracting decisions', 'Drafting follow-ups']}          interval={1200}          className="text-md"        />      </LoadingState>    </div>  )}

Parts

The root, then any compound sub-components. Every part accepts className and forwards the rest of its props to the element or Base UI part beneath it.

LoadingState
A row with the spinner and its label.
LoadingState.Spinner
Ring spinner; size with className.
LoadingState.Text
Cycles through messages every interval ms (default 2000). shimmer defaults to true.