Improve on_scroll event handler

[PasqualePuzio]

Hi,

I was thinking that right now the on_scroll event isn't really suitable for a production app because, especially when used on the whole page or a very large element, it would be triggered so many times that a long queue of events would be created, also generating a large number of websocket messages.

In order to make the on_scroll event handler more efficient, maybe it would be helpful if we could specify a threshold (e.g. trigger the event every 20 pixels) or some other way to only trigger the event in some specific cases.

What do you think?

[masenf]

It's a similar story for the on_mouse_move event as well; too heavy to tie it to a backend event handler due to the latency. Ideally the debounce threshold (height, or time) would need to be more than the expected round trip latency between the frontend and backend, to avoid backing up the queue.

I think reflex could expose something like rx.debounce that could wrap any event handler, but cause the event to only be fired once per timeout period. Something like rx.vstack(on_scroll=rx.debounce(State.my_handler, timeout=300).

However, this still wouldn't completely make the scroll handler usable, because (like mouse move), it does not carry the event details necessary to do anything useful with the event (other than run another script to get the scroll position).

So really I see two issues here and they are separate

• need to debounce high frequency events
• need to expose more detailed event information

[PasqualePuzio]

Yeah, your proposed "solution" could be a starting point.

Perhaps some API like rx.vstack(on_scroll=rx.filter_event(State.my_handler, lambda e: return e.offset > x) where the number and type of parameters could vary depending on the event being filtered.

[masenf]

☝️ that's a good idea, i like that.

It also seems consistent with how we define get_event_triggers in the Component class and would arbitrarily extend to any type of event with any parameters (as long as the args could be properly annotated).