Debounce input events in the preset list.

On a slow machine, the preset list is painfully slow to search, as it
rerenders the list on every keystroke, which takes several hundred
milliseconds. By debouncing this, it is able to keep up.

Performance analysis:

Before: Typing the word 'stream' results in a 2.5s frame according to
Chrome's profiler. Each input event takes between 300 and 600 ms to run.

After: Typing the word 'stream' results in three 300ms frames. The first
and last input events take around 200ms, while the four in the middle
are ignored by the debouncer.
This commit is contained in:
Josh Lee
2021-01-09 18:21:37 +00:00
parent fc6c71160c
commit effc8fed58
+2 -1
View File
@@ -1,5 +1,6 @@
import { dispatch as d3_dispatch } from 'd3-dispatch';
import { select as d3_select } from 'd3-selection';
import _debounce from 'lodash-es/debounce';
import { presetManager } from '../presets';
import { t, localizer } from '../core/localizer';
@@ -122,7 +123,7 @@ export function uiPresetList(context) {
.call(utilNoAuto)
.on('keydown', initialKeydown)
.on('keypress', keypress)
.on('input', inputevent);
.on('input', _debounce(inputevent));
if (_autofocus) {
search.node().focus();