new(vx-responsive): add leading option to resize debounce

[Pringels]

🚀 Enhancements

💥 Breaking Changes

• add leading calls to debounced resize function in all @vx/responsive HOCs and components. This prevents the initial render from blocking, increasing perceived page load speed.

Fixes #753

The gifs below represent a page refresh. I set the debounceTime to 1000ms for demonstration purposes. The Before image shows a 1 second delay before the chart gets rendered on reload. The After image immediately renders the component on reload.

Before:

After:

[williaster]

This is a great addition ⚡ thanks for the contribution @Pringels !

My only thought is that we could make this configurable with props, but we could merge for now and add that later if we get feedback that lib consumers don't want that for some reason (not sure when you wouldn't want this)

[williaster]

@Pringels after discussing more with @hshoff, and looking at the rendering implications (this will add an additional render which is likely fine), we think this probably should be configurable via props, could you make that change?

You can test the difference in behavior in this sandbox

[Pringels]

@williaster I added the additionial key to props. I set the default value to true, as I suspect this would be the desired behaviour in most cases, but if someone really needs to fine-tune performance they can always opt out.

[williaster]

Awesome, thanks @Pringels 🙏 true sounds like the right default 👍

This should be out in the 0.0.198 release 🔜 .

[williaster]

(marking this as breaking for the release since it will add new behavior, still below 1.0.0 so will be 0.0.198 as mentioned above)