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/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}
         />