Custom form components that suspend

Studio puts a fallback boundary around every field and every array item, so one suspending component cannot blank the form. That fallback is a generic skeleton: it does not know the size of what it replaces, so the form shifts when the component loads, and Studio warns about it in the console. The fix always lives in your code: declare a Suspense around the part that suspends, with a fallback that takes the same space as what it stands in for. Any boundary you declare is closer to what suspends than Studio's, so it always wins and nothing warns. That includes a boundary in a custom field around props.renderDefault(props), which also covers the field's input: use it when one fallback should cover both, for example a lazy input that also fetches.

Workflow