a2ui-project / a2ui-project/a2ui
[BUG]: React renderer shows developer `[Loading {id}...]` placeholders to end users
- Ngôn ngữ chính
- TypeScript
- Star
- 16.4k
- Fork
- 1.3k
- Merge trung bình
- 3 ngày 15 giờ
- Pull request đã merge (30 ngày)
- 134
Mô tả
- [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
Hướng dẫn đóng góp
Hướng nghiên cứu
Issue nằm trong `renderers/react/src/v0_9/A2uiSurface.tsx`, tại component `DeferredChild`. Trước tiên, hãy kiểm tra cách `componentModel` được lấy và placeholder được render như thế nào. Mục tiêu là sửa renderer để không hiển thị gì hoặc hiển thị một fallback có thể cấu hình thay vì văn bản debug `[Loading {id}...]`. Kiểm tra xem trong logic render surface đã có các pattern fallback hoặc props nào chưa. Xác minh bản sửa bằng cách tái hiện kịch bản streaming được mô tả.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react, typescript
- Lĩnh vực
- frontend
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Ít trao đổi
- Độ rõ ràng
- Đặc tả rõ ràng
- Mức phù hợp với người mới
- 65/100