a2ui-project / a2ui-project/a2ui
[BUG]: React renderer shows developer `[Loading {id}...]` placeholders to end users
- 主要言語
- TypeScript
- スター
- 16.4k
- フォーク
- 1.3k
- 平均マージ
- 3日 15時間
- マージ済み PR(30日)
- 134
説明
- [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
コントリビューションガイド
調査の方向性
Issue は `renderers/react/src/v0_9/A2uiSurface.tsx` の `DeferredChild` コンポーネントにあります。まず、`componentModel` がどのように取得され、placeholder がどのようにレンダリングされるかを調べます。目的は、デバッグテキスト `[Loading {id}...]` の代わりに何も表示しないか、設定可能なフォールバックを表示するよう renderer を変更することです。surface のレンダリングロジックに既存のフォールバックパターンや props がないか確認します。説明されている streaming シナリオを再現して修正を検証します。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 静か
- 明瞭さ
- 明確に書かれている
- 初心者へのやさしさ
- 65/100