react-iro-gradient-picker 2.0.4 → 2.0.5

package/dist/index.js

@@ -6885,6 +6885,7 @@ var IroColorPicker = React.forwardRef(function (_a, ref) {
     var theme = detectedTheme;
     var isUpdatingColor = React.useRef(false);
     var _o = __read(React.useState(width || 200), 2), containerWidth = _o[0], setContainerWidth = _o[1];
+    var _p = __read(React.useState(true), 2), isLoading = _p[0], setIsLoading = _p[1];
     // Set up ResizeObserver to make the color picker responsive
     // Only when width prop is NOT provided (parent doesn't control width)
     React.useEffect(function () {
@@ -7043,12 +7044,15 @@ var IroColorPicker = React.forwardRef(function (_a, ref) {
             if (!colorPickerRef.current || !colorPickerRef.current.color) {
                 throw new Error('ColorPicker was not created properly');
             }
+            // Update picker ready state and notify parent
+            setIsLoading(false);
             // Force update of imperative handle by calling onMount callback
             if (onMount) {
                 setTimeout(function () { return onMount(colorPickerRef.current); }, 0);
             }
         }
         catch (error) {
+            setIsLoading(false);
             colorPickerRef.current = null;
             return null; // Return null to indicate failure
         }
@@ -7203,13 +7207,69 @@ var IroColorPicker = React.forwardRef(function (_a, ref) {
     React.useEffect(function () {
         if (!width)
             return;
-        createColorPicker(width);
+        var retryCount = 0;
+        var maxRetries = 3;
+        var createWithRetry = function () {
+            // Longer initial delay to ensure DOM is completely ready
+            var timeoutId = setTimeout(function () {
+                try {
+                    var result = createColorPicker(width);
+                    if (!result &&
+                        colorPickerRef.current === null &&
+                        retryCount < maxRetries) {
+                        retryCount++;
+                        // Exponential backoff: 100ms, 200ms, 400ms
+                        setTimeout(createWithRetry, 100 * Math.pow(2, retryCount - 1));
+                    }
+                }
+                catch (error) {
+                    if (retryCount < maxRetries) {
+                        retryCount++;
+                        setTimeout(createWithRetry, 100 * Math.pow(2, retryCount - 1));
+                    }
+                }
+            }, 100); // Increased from 50ms to 100ms
+            return function () { return clearTimeout(timeoutId); };
+        };
+        var cleanupFn = createWithRetry();
+        return function () {
+            if (cleanupFn)
+                cleanupFn();
+        };
     }, [width, theme, createColorPicker]);
     // useEffect for when containerWidth is used (internal ResizeObserver)
     React.useEffect(function () {
         if (width)
             return; // Don't run if width prop is provided
-        createColorPicker(containerWidth);
+        var retryCount = 0;
+        var maxRetries = 3;
+        var createWithRetry = function () {
+            // Longer initial delay to ensure DOM is completely ready
+            var timeoutId = setTimeout(function () {
+                try {
+                    var result = createColorPicker(containerWidth);
+                    if (!result &&
+                        colorPickerRef.current === null &&
+                        retryCount < maxRetries) {
+                        retryCount++;
+                        // Exponential backoff: 100ms, 200ms, 400ms
+                        setTimeout(createWithRetry, 100 * Math.pow(2, retryCount - 1));
+                    }
+                }
+                catch (error) {
+                    if (retryCount < maxRetries) {
+                        retryCount++;
+                        setTimeout(createWithRetry, 100 * Math.pow(2, retryCount - 1));
+                    }
+                }
+            }, 100); // Increased from 50ms to 100ms
+            return function () { return clearTimeout(timeoutId); };
+        };
+        var cleanupFn = createWithRetry();
+        return function () {
+            if (cleanupFn)
+                cleanupFn();
+        };
     }, [containerWidth, theme, createColorPicker, width]);
     // Update color when prop changes
     React.useEffect(function () {
@@ -7313,10 +7373,25 @@ var IroColorPicker = React.forwardRef(function (_a, ref) {
             minWidth: 0,
             overflow: 'hidden',
             justifyContent: 'center',
-            minHeight: 'auto',
+            minHeight: isLoading ? width || containerWidth : 'auto',
             position: 'relative',
             backgroundColor: 'transparent'
-        } }));
+        } }, isLoading && (React__default["default"].createElement("div", { style: {
+            position: 'absolute',
+            inset: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'var(--colorpicker-panel-bg, #1e293b)'
+        } },
+        React__default["default"].createElement("div", { style: {
+                width: '32px',
+                height: '32px',
+                border: '3px solid rgba(59, 130, 246, 0.3)',
+                borderTop: '3px solid rgb(59, 130, 246)',
+                borderRadius: '50%',
+                animation: 'spin 0.8s linear infinite'
+            } })))));
 });
 IroColorPicker.displayName = 'IroColorPicker';