Skip to content
← Inventory

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 catalogue…
1/3

Usage

import { ShimmerVariant, STEP_TIMING, ThinkingLoader, ThinkingLoaderCounter, ThinkingLoaderIcon, ThinkingLoaderOrb, ThinkingLoaderProps, ThinkingLoaderStep, ThinkingStep, useThinkingLoader } from "@desk/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 behavior.

orbThinkingLoaderOrb

Inline {@link ThinkingOrb } in the loader slot. Ignored when loader is provided. Defaults to size 20 for text-adjacent tray 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 "dark" so the sweep matches the shared text Shimmer look (gray → foreground). Use "light" for a softer muted sweep, or "inverted" on dark surfaces.

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

Skip the standalone text-sm default so font-size inherits from a parent (e.g. ThinkingLoader root with text-xs).

shimmerboolean
shimmerVariantShimmerVariant

Shimmer highlight direction. Defaults to "dark" (same as ThinkingLoader).

step(required)ThinkingStep

Also exports

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

Composition

Builds on

AnimatedNumber, Icon, IconMorph, Shimmer, ThinkingOrb