throttle resize events

[s3ththompson]

Avoid unnecessary layouts with a slight throttle

[jongacnik]

This is cool and already on the radar of things I wanted to improve. This way of throttling is how I tend to handle things, but before we merge, I guess I just pose as an open q if using raf has perf benefits over throttling the resize event?

[s3ththompson]

haha sorry to just dump random issues / PRs on your stuff. always just excited to integrate them into stuff i'm working asap.

yeah i was thinking about that myself. I guess according to this there should be a rAF in there too: https://developer.mozilla.org/en-US/docs/Web/Events/resize

one thing in general that i find difficult to reason about is when/where nested rAFs are happening. if choo is rendering your nanocomponent, it's already working inside of a rAF callback, right? obviously resize is being triggered outside the render loop, but i always wonder abut whether to put other component hooks inside rAF callbacks or not

[jongacnik]

Not at all, really appreciate it!

ya hm, might be a good/fun convo to have in irc soon re: the benefits there. Leaning towards just merging this with simple timeout throttle as you have it. Can always tweak approach if we want to later.

[jongacnik]

Main thing here is how throttle is invoked since atm it tries to rerender immediately (before node attached to dom).

After testing with throttle, also think we need the load method to immediately call this.rerender() instead of this.handleResize(), otherwise you get the throttle delay before initial sizing.

[jongacnik]

I think the way throttle is invoked needs a slight tweak:

this.handleResize = throttle(() => this.rerender(), 100)

[jongacnik]

pesky semicolon, picky, sry, 😩

[s3ththompson]

Ah sorry missed this earlier. looks like i was a little sloppy.

Happy to jump on IRC at any point to discuss further