Package

@code-dot-org/oceans-lab (installed 0.1.0-alpha.2), source at frontend/packages/labs/oceans.

Summary

OceansLab throws an uncaught error when its strings / textToSpeechLocale props are updated on a live, mounted instance while the message-box text is mid-animation. In a host that swaps locale without remounting, this unmounts the React tree (black screen).

Context / how it surfaced

The EU AI Literacy embed (code-dot-org/ai-literacy-oceans) wraps OceansLab and changes language by feeding new strings/textToSpeechLocale props without remounting (no key). QA reproduced a black screen by switching languages before the central text box finished rendering (Chrome 149, Windows 11 25H2). Root cause is an unhandled error inside the lab's update path when locale-dependent props change mid-animation.

On code.org proper this path isn't hit because a locale change is a full page reload, so the lab is only ever mounted fresh against a given locale.

Expected

Changing strings / textToSpeechLocale on a mounted instance should either be handled gracefully (re-render with the new catalog, cancelling any in-flight text animation) or be documented as unsupported.

Workaround (applied downstream)

The embed now forces a remount with key={locale} and wraps the lab in an error boundary — see ai-literacy-oceans#1. This issue tracks hardening the lab itself so other embedders aren't exposed to the same crash.

Repro

1. Mount OceansLab with a strings catalog.
2. While the message-box typewriter text is still animating, change strings/textToSpeechLocale to a different locale (no remount).
3. Repeat quickly. The lab throws and the tree unmounts.