@uncinc/uncinc-react-kitchen-sink 2.11.5 → 2.11.6

package/dist/components/Image/AdaptivePicture/index.d.ts

@@ -5,6 +5,7 @@ interface Props extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
     onLoad: (e: any) => void;
     objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
     aspectRatio?: number | string;
+    resizeDelay?: number;
 }
 declare const AdaptivePicture: React.FC<Props>;
 export default AdaptivePicture;

package/dist/components/Image/AdaptivePicture/index.js

@@ -18,7 +18,9 @@ var AdaptivePicture = function AdaptivePicture(_ref) {
     alt = _ref.alt,
     objectFit = _ref.objectFit,
     _ref$aspectRatio = _ref.aspectRatio,
-    aspectRatio = _ref$aspectRatio === void 0 ? 1 : _ref$aspectRatio;
+    aspectRatio = _ref$aspectRatio === void 0 ? 1 : _ref$aspectRatio,
+    _ref$resizeDelay = _ref.resizeDelay,
+    resizeDelay = _ref$resizeDelay === void 0 ? 100 : _ref$resizeDelay;
   var sourcesAsArray = Array.isArray(src) ? src : [src];
   var validatedSources = sourcesAsArray.filter(isValidImage);
   var fallbackImage = validatedSources[0];
@@ -35,6 +37,8 @@ var AdaptivePicture = function AdaptivePicture(_ref) {
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     targetSrc = _React$useState4[0],
     setTargetSrc = _React$useState4[1];
+  var resizingDelay = React.useRef(0);
+  var resizingDelayTimer = React.useRef();
   React.useEffect(function () {
     // @ts-ignore
     if (global.ssr) return;
@@ -44,32 +48,43 @@ var AdaptivePicture = function AdaptivePicture(_ref) {
     var container = image.parentElement;
     if (!container) return;
     var resizeObserver = new ResizeObserver(function (entries) {
-      var widthAfterResize = entries[0].contentRect.width;
-      var newSrcRequired = false;
-      if (image.width < widthAfterResize) {
-        var newTargetSrc = calculateTargetSrc(image.width, validatedSources, fallbackImage);
-        if (targetSrc !== newTargetSrc) {
-          setTargetSrc(newTargetSrc);
-          newSrcRequired = true;
+      // In order to prevent the 'ResizeObserver loop completed with undelivered notifications.' 
+      // message, debounce handling the ResizeObserver action by adding a timeout.
+      clearTimeout(resizingDelayTimer.current);
+      resizingDelayTimer.current = setTimeout(function () {
+        var widthAfterResize = entries[0].contentRect.width;
+        var newSrcRequired = false;
+        if (image.width < widthAfterResize) {
+          var newTargetSrc = calculateTargetSrc(image.width, validatedSources, fallbackImage);
+          if (targetSrc !== newTargetSrc) {
+            setTargetSrc(newTargetSrc);
+            newSrcRequired = true;
+          }
+        } else {
+          var _newTargetSrc = calculateTargetSrc(widthAfterResize, validatedSources, fallbackImage);
+          if (targetSrc !== _newTargetSrc) {
+            setTargetSrc(_newTargetSrc);
+            newSrcRequired = true;
+          }
         }
-      } else {
-        var _newTargetSrc = calculateTargetSrc(widthAfterResize, validatedSources, fallbackImage);
-        if (targetSrc !== _newTargetSrc) {
-          setTargetSrc(_newTargetSrc);
-          newSrcRequired = true;
+        if (status === 'PENDING') {
+          setStatus('INITIAL_BREAKPOINT_CALCULATED');
+
+          // We always load the smallest source. If that's also the source we need
+          // set INITIAL_LOADED directly.
+          // With caching turned on, the onLoad function on the img would only trigger once
+          // and thus never unblur the smallest
+          if (!newSrcRequired) {
+            setStatus('INITIAL_LOADED');
+          }
         }
-      }
-      if (status === 'PENDING') {
-        setStatus('INITIAL_BREAKPOINT_CALCULATED');
 
-        // We always load the smallest source. If that's also the source we need
-        // set INITIAL_LOADED directly.
-        // With caching turned on, the onLoad function on the img would only trigger once
-        // and thus never unblur the smallest
-        if (!newSrcRequired) {
-          setStatus('INITIAL_LOADED');
+        // On page load, we want 0 delay.
+        // After the observer has been triggered once, we set a small debounce.
+        if (resizingDelay.current === 0) {
+          resizingDelay.current = resizeDelay;
         }
-      }
+      }, resizingDelay.current);
     });
     resizeObserver.observe(container);
 
@@ -77,7 +92,7 @@ var AdaptivePicture = function AdaptivePicture(_ref) {
     return function () {
       resizeObserver.unobserve(container);
     };
-  }, [fallbackImage, status, targetSrc, validatedSources]);
+  }, [fallbackImage, status, targetSrc, validatedSources, resizeDelay]);
   var loadedUrl = useImageLoader(fallbackImage, targetSrc, imageRef);
   function onErrorFallback(e) {
     // Make sure that both URLs are absolute URLs, so we can compare them.

package/dist/components/Image/index.d.ts

@@ -8,11 +8,13 @@ declare namespace Image {
         lazyload: PropTypes.Requireable<boolean>;
         aspectRatio: PropTypes.Requireable<number>;
         objectFit: PropTypes.Requireable<string>;
+        resizeDelay: PropTypes.Requireable<number>;
     };
     namespace defaultProps {
         let lazyload: boolean;
-        let aspectRatio: null;
+        let aspectRatio: number;
         let objectFit: null;
+        let resizeDelay: number;
     }
 }
 import React from 'react';

package/dist/components/Image/index.js

@@ -24,11 +24,13 @@ Image.propTypes = _objectSpread({
   src: PropTypes.oneOfType([PropTypes.string, ImmutablePropTypes.map, PropTypes.arrayOf(PropTypes.string)]).isRequired,
   lazyload: PropTypes.bool,
   aspectRatio: PropTypes.number,
-  objectFit: PropTypes.oneOf(['fill', 'contain', 'cover', 'none', 'scale-down'])
+  objectFit: PropTypes.oneOf(['fill', 'contain', 'cover', 'none', 'scale-down']),
+  resizeDelay: PropTypes.number
 }, Picture.propTypes);
 Image.defaultProps = {
   lazyload: true,
-  aspectRatio: null,
-  objectFit: null
+  aspectRatio: 1,
+  objectFit: null,
+  resizeDelay: 100
 };
 export default Image;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.11.5",
+  "version": "2.11.6",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",