Feature: "Load Control" optimisation

[devonChurch]

What 👋

Addresses a performance issue where throttling the HEX update would often loose the final change event causing the native color <input /> and the <Swatch /> UI to become out of sync.

Where 🔍

This can be seen by clicking on a <Swatch /> and "aggressively" stacking update sequences before finishing your color selection. This causes the final swatch selection to be missed by the throttle timeout.

Why 🤔

Users deserve a snappy experience and for their selections to be represented accurately within the UI.

How 💡

The 3rd party Lodash Throttle and Debounce dependencies were removed and a custom optimization currently called "Load Control" was created.

This was a React specific integration (although it can be used with vanilla JS too) built around hooks and combines Throttle and Debounce systems within the same system.

"Load Control" allows for spreading the load when dragging the color range slider while still catching the final <input /> change to keep the UI in sync.

Note 📋

I also integrated the "Load Control" into other areas of the application where a Lodash solution was previously in effect:

• Swatch Scrolling
• Swatch Dragging

Demo 📺

Before 👎 🙁

The final color change is NOT caught causing the native UI to show red while the application UI shows blue

After 👍 🙂

Both native and application UI are now in sync, even when "aggressively" dragging the color range slider_.