Skip to content

fix(react): replace React.lazy with synchronous createComponent in Re…#1184

Open
Anexus5919 wants to merge 1 commit intoTrendyol:nextfrom
Anexus5919:fix/react-wrappers-remove-lazy
Open

fix(react): replace React.lazy with synchronous createComponent in Re…#1184
Anexus5919 wants to merge 1 commit intoTrendyol:nextfrom
Anexus5919:fix/react-wrappers-remove-lazy

Conversation

@Anexus5919
Copy link
Copy Markdown

React wrappers in baklava-react.ts were using React.lazy() + customElements.whenDefined() to create component wrappers. React.lazy always suspends on the first render, triggering the nearest <Suspense> fallback and causing a visible UI flash/blink even when the custom element is already registered.

This PR replaces the lazy pattern with direct ES module imports and synchronous createComponent() calls. The @customElement decorator in each component file registers the element as a side-effect of the import, guaranteeing elementClass is defined before createComponent accesses it.

Before (causes suspension):

export const BlButton = React.lazy(() =>
  customElements.whenDefined("bl-button").then(() => ({
    default: createComponent({
      elementClass: customElements.get("bl-button"),
      ...
    })
  }))
);

After (synchronous, no flash):

import BlButtonElement from "./components/button/bl-button";

export const BlButton = createComponent({
  elementClass: BlButtonElement,
  ...
});

Benefits

  • No UI flash - components render synchronously on first mount, no Suspense fallback triggered
  • No race conditions - ES module evaluation order guarantees element registration before createComponent() runs
  • Tree-shakeable - only imported components are bundled by the consumer
  • Simpler consumer API - consumers no longer need a separate import '@trendyol/baklava' side-effect import when using React wrappers

Changed files

  • cemPlugins/generateReactExports.js - updated generator to emit direct imports and synchronous createComponent() calls
  • cemPlugins/utils/resolveFilePath.js - extracted resolveImportPath() utility for raw import paths

Checklist

  • I have added test cases for this feature
  • I have updated the documentation (if necessary)

Fixes #1171

…act wrappers

React wrappers were using React.lazy + customElements.whenDefined, which
always triggers Suspense fallback on first render causing a visible UI flash.

Replace with direct ES module imports of component classes and synchronous
createComponent calls. The @CustomElement decorator registers elements as a
side-effect of the import, guaranteeing elementClass is defined before
createComponent accesses it.

Fixes Trendyol#1171
@Anexus5919
Copy link
Copy Markdown
Author

@Enes5519 @ergenekonyigit
Kindly review this PR when you get a chance. Thanks!

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.

[BUG]: React wrappers use React.lazy unnecessarily, causing UI flashes

1 participant