Skip to content

feat: add loading and error fallbacks - #83

Open
arpittkhandelwal wants to merge 2 commits into
unlayer:mainfrom
arpittkhandelwal:feat/editor-fallback-ui
Open

arpittkhandelwal wants to merge 2 commits into
unlayer:mainfrom
arpittkhandelwal:feat/editor-fallback-ui

Conversation

@arpittkhandelwal

@arpittkhandelwal arpittkhandelwal commented Sep 21, 2026 •

Copy link
Copy Markdown

Summary

This PR prevents the blank editor container shown while the CDN embed script and editor instance are initializing, and gives host applications control over the loading and initialization-error experience.

Closes #82

What changed

  • Adds loadingFallback?: ReactNode for a custom loading spinner, skeleton, image, or branded UI.
  • Adds errorFallback?: ReactNode | ((error, retry) => ReactNode) for a custom initialization-error experience.
  • Provides accessible defaults when no fallbacks are supplied:
    • loading: role="status" with “Loading image editor…”
    • error: role="alert" with a “Try again” button
  • Exposes the original initialization error and a retry callback to functional error fallbacks.
  • Keeps the editor mount element in the DOM beneath the fallback overlay, so initialization can continue without changing the editor’s container.
  • Times out both reused and newly injected embed-script tags after 30 seconds. Previously, a CDN request that stalled without firing load or error left the component loading forever and made retry unreachable. The timed-out tag is removed so retry starts fresh.
  • Documents the fallback API and adds tests for loading, error, retry, and stalled-script lifecycles.

Example

<ImageEditor
  image={url}
  loadingFallback={<Spinner label="Loading editor" />}
  errorFallback={(error, retry) => (
    <section role="alert">
      <p>Could not load the editor: {error.message}</p>
      <button onClick={retry}>Try again</button>
    </section>
  )}
/>

Backward compatibility

Existing ImageEditor usage is unchanged. Consumers who do not pass fallbacks receive sensible default loading and retryable error UI instead of a blank surface.

Verification

  • npm test — 51 tests passing
  • npm run typecheck
  • npm run lint
  • npm run build

@vercel

vercel Bot commented Sep 21, 2026

Copy link
Copy Markdown

@arpittkhandelwal is attempting to deploy a commit to the Unlayer Team on Vercel.

A member of the Team first needs to authorize it.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] Custom Loading & Error Fallback UI Props (renderLoading / renderError)

1 participant