[Visualize] Lazy load default editor, fix duplicated styles

[sulemanof]

Summary

Part of #64517

This is intended to split loading the default editor code and prevent duplicating of css rules across all places where stuff is imported from vis_default_editor/public (the most of vis types)

The EuiLoadingChart mono is added as spinner (more visible if internet is slow):

And the EuiErrorBoundary if something went wrong:

Checklist

Delete any items that are not applicable to this PR.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
• This was checked for cross-browser compatibility, including a check against IE11

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[flash1293]

I checked this and it only brings the initial bundle from 1.3M to 1.2M. One quick win would be to not import the default editor within the initial bundle (20% contributor):

src/plugins/visualize/public/kibana_services.ts
37:import { DefaultEditorController } from '../../vis_default_editor/public';

src/plugins/visualize/public/plugin.ts
43:import { DefaultEditorController } from '../../vis_default_editor/public';

For some reason, currently the stateless "DefaultEditorController" is put into the services object directly in plugin.ts. It looks like it would be totally fine to just import the default controller in src/plugins/visualize/public/application/editor/visualization_editor.js where it's used. It looks like this is also the only way lodash is introduced into the initial bundle (another 20% contributor), but maybe it's also imported from somewhere else, not sure.

Also, 30% of the initial bundle is caused by core, probably because of the DEFAULT_APP_CATEGORIES import in plugin.ts. @restrry are there plans to avoid this or something non-hacky we can do from our side?

[mshustov]

Also, 30% of the initial bundle is caused by core, probably because of the DEFAULT_APP_CATEGORIES import in plugin.ts. @restrry are there plans to avoid this or something non-hacky we can do from our side?

@flash1293 we are still planning to land tree-shaking in 7.9 (and hopefully we can port it to 7.8)

[flash1293]

@restrry Thanks, makes sense. I'm really excited for this :)

@sulemanof I think we can reap the vis_default_editor benefits now, but anything else can probably be postponed till after tree shaking lands.

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[flash1293]

Down to 837K 💯 Almost all of the rest of the bundle is core being pulled in which should be fixed by tree shaking.

[flash1293]

Tested in Firefox, Visualize still works, LGTM.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 130dba3

History

• 💚 Build #48592 succeeded 68c9de1
• 💔 Build #48348 failed 7763e29
• 💔 Build #48313 failed 0cfda13

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[cchaos]

I didn't test locally, but the SASS imports look ok.