observablehq/inputs

update UI before dispatching the event?

Fil opened this issue · 2 comments

Fil commented

Currently if a long-running computation depends on an input, the input UI (here, the range slider) will update only after the computation has run. It seems that it would be a nicer UX if the input responded immediately instead, thus giving immediate feedback to the user that the change has been "registered".

Enregistrement.de.l.ecran.2022-07-06.a.14.12.04.mov

I think you'd have to handle that in the cell where the computation happens, e.g. adding by await Promises.delay(0); to the beginning. A cell usually depends on a variety of other inputs/cells, and a change in any of those would trigger a recomputation.

I'd recommend adding a general debounce() helper instead which can wrap an input.

Fil commented

Adding await Promises.delay(0); works well, I'll do that. And closing as a duplicate of #152.