Loader text

LoaderText renders a single line of text with a subtle shimmer, built for streaming, agent-driven states where you want to narrate work as it happens. Pass an optional leading icon to reinforce the current action.

<LoaderText icon={SearchIcon}>Searching the codebase</LoaderText>

Set the completed flag once the task finishes to stop the shimmer and cross-fade the label into the completedText you provide. This makes it easy to narrate a sequence of steps as each one resolves.

<LoaderText
  icon={SearchIcon}
  completed={completedToggle.active}
  completedText="Searched 128 files"
>
  Searching the codebase
</LoaderText>

LoaderText extends Text, so you can control its typography with the same variant and weight properties.