Skip to content

use lazyComponent wrapper for React lazy-loaded components

Warren Gifford requested to merge async-components into master

Created by: sqs

This removes some boilerplate and will make it easier to support hot reloading for React components that are lazily loaded (for Webpack code splitting).

codemod -m --extensions tsx,ts -d web/src "React.lazy\(async \(\) => \(\{\s*default: \(await import\('([^']+)'\)\)\s*\.(\w+),?\s*\}\)\)" 'lazyComponent(() => import("\1"), "\2")'

Also:

  • Removes unnecessary consts at the top of the file where possible.
  • make lazy-loading of MonacoSettingsEditor more robust. Hot reloading makes it so that the reference to MonacoSettingsEditor is not the class, but rather a proxy component. This means that isStandaloneCodeEditor and addEditorAction aren't defined as methods on the value when hot reloading is enabled. To work around this issue, this commit uses a more compatible way of lazy-loading the class.

Merge request reports