feat: move ace-editor and mathjs to async modules (#10837)

Follow up on #10831, move brace and mathjs to async modules so that the initial page load for dashboards most pages can be faster.

superset-frontend/src/explore/components/controls/AnnotationLayerControl.jsx

@@ -27,10 +27,15 @@ import {
 import { connect } from 'react-redux';
 import { t, withTheme } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
-import { getChartKey } from '../../exploreUtils';
-import { runAnnotationQuery } from '../../../chart/chartAction';
+import AsyncEsmComponent from 'src/components/AsyncEsmComponent';
+import { getChartKey } from 'src/explore/exploreUtils';
+import { runAnnotationQuery } from 'src/chart/chartAction';
 
-import AnnotationLayer from './AnnotationLayer';
+const AnnotationLayer = AsyncEsmComponent(
+  () => import('./AnnotationLayer'),
+  // size of overlay inner content
+  () => <div style={{ width: 450, height: 368 }} />,
+);
 
 const propTypes = {
   colorScheme: PropTypes.string.isRequired,
@@ -61,6 +66,11 @@ class AnnotationLayerControl extends React.PureComponent {
     this.removeAnnotationLayer = this.removeAnnotationLayer.bind(this);
   }
 
+  componentDidMount() {
+    // preload the AnotationLayer component and dependent libraries i.e. mathjs
+    AnnotationLayer.preload();
+  }
+
   UNSAFE_componentWillReceiveProps(nextProps) {
     const { name, annotationError, validationErrors, value } = nextProps;
     if (Object.keys(annotationError).length && !validationErrors.length) {
@@ -111,6 +121,7 @@ class AnnotationLayerControl extends React.PureComponent {
       >
         <AnnotationLayer
           {...annotation}
+          parent={this.refs[parent]}
           error={error}
           colorScheme={this.props.colorScheme}
           vizType={this.props.vizType}