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'

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-base"
        />
      </LoadingState>
    </div>
  )
}

Parts

Compound sub-components. Every part accepts className and forwards the rest of its props to Base UI.

LoadingState.Spinner: Ring spinner; size with className.
LoadingState.Text: Cycles through messages every interval ms (default 2000). shimmer defaults to true.