Skip to content

feat(react-ui): ambient loading state for AgentInterface + export DotMatrixLoader - #835

Merged
ankit-thesys merged 1 commit into
mainfrom
ankit/agent-interface-ambient-loader
Jul 24, 2026
Merged

feat(react-ui): ambient loading state for AgentInterface + export DotMatrixLoader#835
ankit-thesys merged 1 commit into
mainfrom
ankit/agent-interface-ambient-loader

Conversation

@ankit-thesys

Copy link
Copy Markdown
Contributor

Part of the "loaders are just Loading…" cleanup across AgentInterface surfaces (the artifact-renderer side ships separately in the SDK repo).

What

AmbientLoader — an AgentInterface-internal loading state: two blurred glow blobs (blur(64px)) drift and breathe on opposing 7s/9.5s cycles behind the shared dot-matrix loader, with a required contextual label so no call site can render a bare "Loading…" again.

  • Theme-token driven: neutral themes render the glow as soft luminance depth; branded themes (a colored accent token, e.g. openui-cloud's blue) tint it automatically.
  • prefers-reduced-motion freezes the drift; the label is the single role="status" announcement (the inner matrix is aria-hidden).
  • Internal on purpose — not exported, no compound static.

Wired into the one full-screen gap: opening a thread previously hid the entire panel (visibility: hidden) with nothing shown while messages loaded. That state now renders the loader with "Loading conversation…" — same isLoadingMessages flag as the old hiding, so behavior parity is exact. The overlay covers only the thread panel; the sidebar stays interactive.

DotMatrixLoader joins the package index — artifact renderers are composed by consumers, and their loading states should reuse this loader instead of carrying ports of it.

Untouched: every existing DotMatrixLoader site (artifact view page, artifact browser, message loading) — they already do the right thing.

Test Plan

  • pnpm build + pnpm test (27/27) green; both new classes present in dist/components/index.css; DotMatrixLoader verified importable from the built index
  • Live in the openui-cloud example: thread-open state shows the loader with the brand-blue glow over light theme; sidebar unaffected; settled artifacts still render instantly
  • Slow-network sweep (CDP throttling) across browser pages / full-page artifact view confirmed the existing DotMatrixLoader sites behave unchanged

🤖 Generated with Claude Code

https://claude.ai/code/session_01XECS4NLhz6BNd1TUYbWjfu

…MatrixLoader

Adds AmbientLoader, an AgentInterface-internal loading state: two blurred
glow blobs drift and breathe behind the dot-matrix loader with a required
contextual label (no surface can render a bare "Loading…"). Neutral themes
render the glow as soft luminance depth; branded themes tint it through the
accent token automatically. Freezes under prefers-reduced-motion.

Wired into the one full-screen gap: opening a thread previously blanked the
whole panel (visibility: hidden with nothing shown) while messages loaded —
that state now shows the loader with "Loading conversation…". All existing
DotMatrixLoader sites are untouched.

DotMatrixLoader itself joins the package index so artifact renderers
(composed by consumers) can build matching loading states instead of
carrying ports of it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XECS4NLhz6BNd1TUYbWjfu
Comment thread packages/react-ui/src/components/AgentInterface/Thread.tsx
@ankit-thesys
ankit-thesys merged commit 6ec5614 into main Jul 24, 2026
2 checks passed
@ankit-thesys
ankit-thesys deleted the ankit/agent-interface-ambient-loader branch July 24, 2026 07:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants