fix(@clayui/color-picker): update Hue before the browser can paint

Updating Hue in most cases was causing blocking since we are always updating the `left` of the range pointer.

Author: matuzalemsteles

packages/clay-color-picker/src/Hue.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import React, {useEffect, useRef} from 'react';
+import React, {useEffect, useLayoutEffect, useRef} from 'react';
 
 import {useMousePosition} from './hooks';
 import {hueToX, xToHue} from './util';
@@ -40,7 +40,7 @@ const ClayColorPickerHue: React.FunctionComponent<IProps> = ({
 		window.removeEventListener('mouseup', removeListeners);
 	};
 
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (containerRef.current && selectorActive.current) {
 			onChange(xToHue(x, containerRef.current));
 		}