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}

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

@@ -32,10 +32,12 @@ import { t } from '@superset-ui/core';
 import { ColumnOption, MetricOption } from '@superset-ui/chart-controls';
 
 import Label from 'src/components/Label';
+import TooltipWrapper from 'src/components/TooltipWrapper';
+
+import DatasourceModal from 'src/datasource/DatasourceModal';
+import ChangeDatasourceModal from 'src/datasource/ChangeDatasourceModal';
+
 import ControlHeader from '../ControlHeader';
-import DatasourceModal from '../../../datasource/DatasourceModal';
-import ChangeDatasourceModal from '../../../datasource/ChangeDatasourceModal';
-import TooltipWrapper from '../../../components/TooltipWrapper';
 import './DatasourceControl.less';
 
 const propTypes = {

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

@@ -23,10 +23,10 @@ import Button from 'src/components/Button';
 import { t } from '@superset-ui/core';
 
 import Label from 'src/components/Label';
+import PopoverSection from 'src/components/PopoverSection';
+import Checkbox from 'src/components/Checkbox';
 import ControlHeader from '../ControlHeader';
 import SelectControl from './SelectControl';
-import PopoverSection from '../../../components/PopoverSection';
-import Checkbox from '../../../components/Checkbox';
 
 const spatialTypes = {
   latlong: 'latlong',

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

@@ -19,20 +19,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormGroup, FormControl } from 'react-bootstrap';
-import Button from 'src/components/Button';
-
-import AceEditor from 'react-ace';
-import 'brace/mode/sql';
-import 'brace/mode/json';
-import 'brace/mode/html';
-import 'brace/mode/markdown';
-import 'brace/mode/javascript';
-import 'brace/theme/textmate';
-
+import { debounce } from 'lodash';
 import { t } from '@superset-ui/core';
 
+import Button from 'src/components/Button';
+import { TextAreaEditor } from 'src/components/AsyncAceEditor';
+import ModalTrigger from 'src/components/ModalTrigger';
+
 import ControlHeader from '../ControlHeader';
-import ModalTrigger from '../../../components/ModalTrigger';
 
 const propTypes = {
   name: PropTypes.string,
@@ -65,6 +59,12 @@ const defaultProps = {
 };
 
 export default class TextAreaControl extends React.Component {
+  constructor() {
+    super();
+    this.onAceChangeDebounce = debounce(value => {
+      this.onAceChange(value);
+    }, 300);
+  }
   onControlChange(event) {
     this.props.onChange(event.target.value);
   }
@@ -75,18 +75,18 @@ export default class TextAreaControl extends React.Component {
 
   renderEditor(inModal = false) {
     const value = this.props.value || '';
+    const minLines = inModal ? 40 : this.props.minLines || 12;
     if (this.props.language) {
       return (
-        <AceEditor
+        <TextAreaEditor
           mode={this.props.language}
-          theme="textmate"
           style={{ border: '1px solid #CCC' }}
-          minLines={inModal ? 40 : this.props.minLines}
+          minLines={minLines}
           maxLines={inModal ? 1000 : this.props.maxLines}
-          onChange={this.onAceChange.bind(this)}
+          onChange={this.onAceChangeDebounce}
           width="100%"
+          height={`${minLines}em`}
           editorProps={{ $blockScrolling: true }}
-          enableLiveAutocompletion
           value={value}
           readOnly={this.props.readOnly}
         />