a2ui-project / a2ui-project/a2ui

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

Đang mở
#2,013 7 bình luận 0 reaction 2 người được giao Được @andrewkolos nhận Xem trên GitHub
component: react renderer P2 status: first-line-handled type: feature/enhancement
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

[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

Hướng dẫn đóng góp

Mở 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

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.