Between mount and the editor becoming ready, the component renders an empty container:
https://github.com/unlayer/react-image-editor/blob/628b507/src/ImageEditor.tsx#L193-L203
On a cold CDN cache that blank box is on screen for the full embed.js request plus the versioned-bundle hop — at minHeight: 500 it's a large, unexplained empty area, and there is no supported way to put a spinner or skeleton in it.
Why the current API doesn't cover it
onLoad fires only after the instance is committed, so consumers have to render their own absolutely-positioned overlay from first paint and tear it down in onLoad. That needs a wrapper with position: relative and knowledge of the internal two-div layout.- It also doesn't cover the failure path: after
onError the overlay is still up unless the consumer separately tracks that, and the container just stays blank.
Suggested API
Something purely additive — render a placeholder (or children) inside the container while editor === null, and clear it once the instance is committed:
<ImageEditor image={url} placeholder={<Spinner />} />The component already has exactly the state this needs — the editor state variable is null until the mount chain commits an instance and is reset to null on teardown, so no new bookkeeping is required.
Worth deciding as part of the design: whether the placeholder should stay (or be swappable) when the mount fails, since that's the case where a blank box is most confusing.
Between mount and the editor becoming ready, the component renders an empty container:
https://github.com/unlayer/react-image-editor/blob/628b507/src/ImageEditor.tsx#L193-L203
On a cold CDN cache that blank box is on screen for the full
embed.jsrequest plus the versioned-bundle hop — atminHeight: 500it's a large, unexplained empty area, and there is no supported way to put a spinner or skeleton in it.Why the current API doesn't cover it
onLoadfires only after the instance is committed, so consumers have to render their own absolutely-positioned overlay from first paint and tear it down inonLoad. That needs a wrapper withposition: relativeand knowledge of the internal two-div layout.onErrorthe overlay is still up unless the consumer separately tracks that, and the container just stays blank.Suggested API
Something purely additive — render a
placeholder(orchildren) inside the container whileeditor === null, and clear it once the instance is committed:The component already has exactly the state this needs — the
editorstate variable isnulluntil the mount chain commits an instance and is reset tonullon teardown, so no new bookkeeping is required.Worth deciding as part of the design: whether the placeholder should stay (or be swappable) when the mount fails, since that's the case where a blank box is most confusing.