a2ui-project / a2ui-project/a2ui
[BUG]: React renderer shows developer `[Loading {id}...]` placeholders to end users
- 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
}
...
```
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
## 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
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