Skip to content
Components

ThinkingLoader

LLM-style "labor illusion" loader with blur conveyor animations and shimmer text effect. Supports both controlled mode (parent drives currentStep) and uncontrolled mode (auto-cycles through steps based on interval).

Scanning catalog…
1/3

Usage

import { ShimmerVariant, STEP_TIMING, ThinkingLoader, ThinkingLoaderCounter, ThinkingLoaderIcon, ThinkingLoaderOrb, ThinkingLoaderProps, ThinkingLoaderStep, ThinkingStep, useThinkingLoader } from "@instruments/materia-ui/components/thinking-loader";

Best practices

  • Drive ThinkingLoader with currentStep (controlled) to reflect real progress, or omit it to auto-cycle steps on interval for a labor-illusion loader.

  • It already renders an aria-live="polite" region announcing each step - don't wrap it in another status role. Mount ReducedMotionProvider since it animates via m.*.

Props

ThinkingLoader

PropTypeDefaultDescription
classNamestring

Additional CSS classes

currentStepnumber

Controlled mode: parent drives step progression

intervalnumber

Total cycle time per step in ms, used for uncontrolled auto-cycling (default: 2500)

loaderReactNode

Custom static loader visual rendered on the left of the shimmer text. When provided, replaces the per-step morphing icon (and overrides morphIcons). Use this to plug in feature-specific glyphs - e.g. an SVG loader - while keeping the shared shimmer-text behaviour.

orbThinkingLoaderOrb

Inline {@link ThinkingOrb } in the loader slot. Ignored when loader is provided. Defaults to size 20 for text-adjacent rows.

morphIconsboolean

Icons morph in place instead of animating with text (default: false)

onStepChange(index: number, step: ThinkingStep) => void

Callback when step changes (uncontrolled mode)

shimmerboolean

Enable shimmer effect (default: true)

shimmerVariantShimmerVariant

Shimmer highlight direction. Defaults to the legible foreground "dark" sweep.

showCounterboolean

Show "1/4" counter

steps(required)ThinkingStep[]

Array of steps to display

ThinkingLoaderCounter

PropTypeDefaultDescription
classNamestring
current(required)number
total(required)number

ThinkingLoaderIcon

PropTypeDefaultDescription
icon(required)LucideIcon | undefined
stepId(required)string

ThinkingLoaderStep

PropTypeDefaultDescription
classNamestring
hideIconboolean

Hide icon (when rendered separately for morphing)

inheritSizeboolean

Inherit font size from a containing ThinkingLoader.

shimmerboolean
shimmerVariantShimmerVariant

Shimmer highlight direction. Defaults to "dark".

step(required)ThinkingStep

Also exports

  • typeShimmerVariant
  • constSTEP_TIMING
  • typeThinkingLoaderOrb
  • interfaceThinkingLoaderProps
  • interfaceThinkingStep
  • constuseThinkingLoader

Composition

Builds on

AnimatedNumber, Flex, Icon, IconMorph, Shimmer, ThinkingOrb