react-iro-gradient-picker 2.0.3 → 2.0.5

package/dist/index.es.js

@@ -6877,6 +6877,7 @@ var IroColorPicker = forwardRef(function (_a, ref) {
     var theme = detectedTheme;
     var isUpdatingColor = useRef(false);
     var _o = __read(useState(width || 200), 2), containerWidth = _o[0], setContainerWidth = _o[1];
+    var _p = __read(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)
     useEffect(function () {
@@ -7035,12 +7036,15 @@ var IroColorPicker = 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
         }
@@ -7361,10 +7365,25 @@ var IroColorPicker = forwardRef(function (_a, ref) {
             minWidth: 0,
             overflow: 'hidden',
             justifyContent: 'center',
-            minHeight: 'auto',
+            minHeight: isLoading ? width || containerWidth : 'auto',
             position: 'relative',
             backgroundColor: 'transparent'
-        } }));
+        } }, isLoading && (React.createElement("div", { style: {
+            position: 'absolute',
+            inset: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'var(--colorpicker-panel-bg, #1e293b)'
+        } },
+        React.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';