refactor: add frontend debounce constants (#13250)

superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx

@@ -25,6 +25,7 @@ import { debounce } from 'lodash';
 
 import ModalTrigger from 'src/components/ModalTrigger';
 import { ConfigEditor } from 'src/components/AsyncAceEditor';
+import { FAST_DEBOUNCE } from 'src/constants';
 
 const propTypes = {
   onChange: PropTypes.func,
@@ -80,7 +81,7 @@ function TemplateParamsEditor({ code, language, onChange }) {
         mode={language}
         minLines={25}
         maxLines={50}
-        onChange={debounce(onChange, 200)}
+        onChange={debounce(onChange, FAST_DEBOUNCE)}
         width="100%"
         editorProps={{ $blockScrolling: true }}
         enableLiveAutocompletion

superset-frontend/src/constants.ts

@@ -27,3 +27,13 @@ export const URL_PARAMS = {
   standalone: 'standalone',
   preselectFilters: 'preselect_filters',
 };
+
+/**
+ * Faster debounce delay for inputs without expensive operation.
+ */
+export const FAST_DEBOUNCE = 250;
+
+/**
+ * Slower debounce delay for inputs with expensive API calls.
+ */
+export const SLOW_DEBOUNCE = 500;

superset-frontend/src/explore/components/DataTableControl.tsx

@@ -22,7 +22,11 @@ import { FormControl } from 'react-bootstrap';
 import { Column } from 'react-table';
 import debounce from 'lodash/debounce';
 
-import { BOOL_FALSE_DISPLAY, BOOL_TRUE_DISPLAY } from 'src/constants';
+import {
+  BOOL_FALSE_DISPLAY,
+  BOOL_TRUE_DISPLAY,
+  SLOW_DEBOUNCE,
+} from 'src/constants';
 import Button from 'src/components/Button';
 import {
   applyFormattingToTabularData,
@@ -67,7 +71,7 @@ export const FilterInput = ({
 }: {
   onChangeHandler(filterText: string): void;
 }) => {
-  const debouncedChangeHandler = debounce(onChangeHandler, 500);
+  const debouncedChangeHandler = debounce(onChangeHandler, SLOW_DEBOUNCE);
   return (
     <FormControl
       placeholder={t('Search')}

superset-frontend/src/explore/components/DatasourcePanel.tsx

@@ -27,8 +27,9 @@ import {
 } from '@superset-ui/chart-controls';
 import { debounce } from 'lodash';
 import { matchSorter, rankings } from 'match-sorter';
-import { ExploreActions } from '../actions/exploreActions';
-import Control from './Control';
+import { FAST_DEBOUNCE } from 'src/constants';
+import { ExploreActions } from 'src/explore/actions/exploreActions';
+import Control from 'src/explore/components/Control';
 
 interface DatasourceControl extends ControlConfig {
   datasource?: DatasourceMeta;
@@ -162,7 +163,7 @@ export default function DataSourcePanel({
           String(a.rankedValue).localeCompare(b.rankedValue),
       }),
     });
-  }, 200);
+  }, FAST_DEBOUNCE);
 
   useEffect(() => {
     setList({

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

@@ -22,11 +22,12 @@ import { FormGroup, FormControl } from 'react-bootstrap';
 import { debounce } from 'lodash';
 import { t } from '@superset-ui/core';
 
+import { FAST_DEBOUNCE } from 'src/constants';
 import Button from 'src/components/Button';
 import { TextAreaEditor } from 'src/components/AsyncAceEditor';
 import ModalTrigger from 'src/components/ModalTrigger';
 
-import ControlHeader from '../ControlHeader';
+import ControlHeader from 'src/explore/components/ControlHeader';
 
 const propTypes = {
   name: PropTypes.string,
@@ -63,7 +64,7 @@ export default class TextAreaControl extends React.Component {
     super();
     this.onAceChangeDebounce = debounce(value => {
       this.onAceChange(value);
-    }, 300);
+    }, FAST_DEBOUNCE);
   }
 
   onControlChange(event) {

superset-frontend/src/visualizations/FilterBox/FilterBox.jsx

@@ -24,7 +24,11 @@ import { AsyncCreatableSelect, CreatableSelect } from 'src/components/Select';
 import Button from 'src/components/Button';
 import { t, SupersetClient } from '@superset-ui/core';
 
-import { BOOL_FALSE_DISPLAY, BOOL_TRUE_DISPLAY } from 'src/constants';
+import {
+  BOOL_FALSE_DISPLAY,
+  BOOL_TRUE_DISPLAY,
+  SLOW_DEBOUNCE,
+} from 'src/constants';
 import FormLabel from 'src/components/FormLabel';
 import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
 import ControlRow from 'src/explore/components/ControlRow';
@@ -184,7 +188,7 @@ class FilterBox extends React.PureComponent {
     if (!(key in this.debouncerCache)) {
       this.debouncerCache[key] = debounce((input, callback) => {
         this.loadOptions(key, input).then(callback);
-      }, 500);
+      }, SLOW_DEBOUNCE);
     }
     return this.debouncerCache[key];
   }
@@ -298,7 +302,6 @@ class FilterBox extends React.PureComponent {
       datasourceFilters.push(
         <ControlRow
           key="sqla-filters"
-          className="control-row"
           controls={sqlaFilters.map(control => (
             <Control {...this.getControlData(control)} />
           ))}
@@ -309,7 +312,6 @@ class FilterBox extends React.PureComponent {
       datasourceFilters.push(
         <ControlRow
           key="druid-filters"
-          className="control-row"
           controls={druidFilters.map(control => (
             <Control {...this.getControlData(control)} />
           ))}