a2ui-project / a2ui-project/a2ui

[BUG]: React renderer shows developer `[Loading {id}...]` placeholders to end users

Open
#2,013 7 comments 0 reactions 2 assignees Claimed by @andrewkolos View on GitHub
component: react renderer P2 status: first-line-handled type: feature/enhancement
Dominant language
TypeScript
Stars
16.4k
Forks
1.3k
Avg merge
3d 15h
Merged PRs (30d)
134

Description

- [x] I have searched the existing issues to make sure this bug has not already been reported.

## Describe the Bug

The React renderer renders hard-coded developer placeholders directly into the surface tree, and there is no way to customize or disable them.

In `renderers/react/src/v0_9/A2uiSurface.tsx`, `DeferredChild` returns literal debug text when a component is not yet available:

```tsx
const componentModel = surface.componentsModel.get(id);

if (!componentModel) {
return

[Loading {id}...]
;
}

...
```

Because `A2uiSurface` renders ``, this placeholder sits on the only rendering path and cannot be bypassed. During streaming, when a referenced component has not been created yet, end users briefly see text such as `[Loading root...]`, and `Unknown component: ` (red) when a catalog implementation is missing. These are debug-style placeholders (inline `color`/`padding`) that are not appropriate for production UIs.

## Steps to Reproduce

1. Render a surface with `A2uiSurface`.
2. Stream component updates incrementally (e.g., send `createSurface`, then `updateComponents` in separate messages, or add a parent component before its children).
3. Observe the surface between updates.
4. See `[Loading root...]` (and `[Loading ...]` for not-yet-created children) rendered to the user.

## Expected Behavior

While a component is not yet available, the renderer should render nothing by default, or let the consumer provide a fallback. Debug text should not reach end users.

## Screenshots

Image

## Environment Details

- **OS**: macOS
- **Browser/Platform**: Chrome
- **SDK/Package Name & Version**: @a2ui/react v0.10.1, @a2ui/web_core v0.10.3
- **Protocol Version**: v0.9
- **Agent Framework & LLM Model**: ADK

Contributor guide

Open the contributing guide

Research direction

The issue is in `renderers/react/src/v0_9/A2uiSurface.tsx` in the `DeferredChild` component. Start by examining how `componentModel` is fetched and the placeholder is rendered. The goal is to modify the renderer to show nothing or a configurable fallback instead of the debug text `[Loading {id}...]`. Check for any existing fallback patterns or props in the surface rendering logic. Verify the fix by reproducing the streaming scenario described.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
65/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.