search

observablehq / inputs

Better input elements
https://observablehq.com/framework/lib/inputs
ISC License
127 stars 34 forks source link

update UI before dispatching the event? #231

Closed Fil closed 2 years ago

Fil commented 2 years ago

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".

https://user-images.githubusercontent.com/7001/177547348-792f320b-d49a-4e75-9f82-86c448ef891e.mov

mootari commented 2 years ago

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 2 years ago

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