a2ui-project / a2ui-project/a2ui

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

Offen
#2,013 7 Kommentare 0 Reaktionen 2 zugewiesene Personen Beansprucht von @andrewkolos Auf GitHub ansehen
component: react renderer P2 status: first-line-handled type: feature/enhancement
Vorherrschende Sprache
TypeScript
Sterne
16.4k
Forks
1.3k
Ø Merge
3 T. 15 Std.
Gemergte PRs (30 T.)
134

Beschreibung

- [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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Das Issue befindet sich in `renderers/react/src/v0_9/A2uiSurface.tsx` in der Komponente `DeferredChild`. Untersuche zunächst, wie `componentModel` abgerufen und der Platzhalter gerendert wird. Ziel ist es, den Renderer so zu ändern, dass er nichts oder einen konfigurierbaren Fallback anzeigt, anstatt des Debug-Texts `[Loading {id}...]`. Prüfe, ob es in der Rendering-Logik der Surface bereits Fallback-Muster oder Props gibt. Verifiziere die Änderung, indem du das beschriebene Streaming-Szenario reproduzierst.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Ruhig
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
65/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.