diff --git a/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx b/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx index 20e80a171d1e..8c02e0f36cad 100644 --- a/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx +++ b/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 diff --git a/superset-frontend/src/constants.ts b/superset-frontend/src/constants.ts index 850baf958f8f..0a7f156099c2 100644 --- a/superset-frontend/src/constants.ts +++ b/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; diff --git a/superset-frontend/src/explore/components/DataTableControl.tsx b/superset-frontend/src/explore/components/DataTableControl.tsx index d319756ea4ee..359dc7ecd96c 100644 --- a/superset-frontend/src/explore/components/DataTableControl.tsx +++ b/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 ( { setList({ diff --git a/superset-frontend/src/explore/components/controls/TextAreaControl.jsx b/superset-frontend/src/explore/components/controls/TextAreaControl.jsx index 0bcf2d12860d..9d579bb59c53 100644 --- a/superset-frontend/src/explore/components/controls/TextAreaControl.jsx +++ b/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) { diff --git a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx index e2dce1e6b531..d3d3cab33053 100644 --- a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx +++ b/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( ( ))} @@ -309,7 +312,6 @@ class FilterBox extends React.PureComponent { datasourceFilters.push( ( ))}