@7shifts/sous-chef 3.64.0 → 3.65.0-beta.1

package/dist/index.modern.js

@@ -13860,21 +13860,101 @@ const PROFILE_IMAGES = [{
   avatarColor: '#F2DCBD'
 }];
 
+let elementCallbackMap = null;
+function getElementCallbackMap() {
+  if (!elementCallbackMap) {
+    elementCallbackMap = new Map();
+  }
+  return elementCallbackMap;
+}
+let intersectionObserver = null;
+function getIntersectionObserver() {
+  if (!intersectionObserver) {
+    intersectionObserver = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        var _getElementCallbackMa;
+        (_getElementCallbackMa = getElementCallbackMap().get(entry.target)) == null || _getElementCallbackMa(entry.isIntersecting);
+      });
+    }, {
+      rootMargin: '50px 50px 50px 50px',
+      threshold: 0
+    });
+  }
+  return intersectionObserver;
+}
+/**
+ * @private
+ * @description For internal use only. For a general hook to check element visibility, use useIsVisibleInViewPort.
+ */
+function useViewPortIntersectionObserver() {
+  const intersectionObserverRef = useRef(getIntersectionObserver());
+  const elementCallbackMapRef = useRef(getElementCallbackMap());
+  const observeElement = useCallback((target, callback) => {
+    elementCallbackMapRef.current.set(target, callback);
+    intersectionObserverRef.current.observe(target);
+  }, []);
+  const unobserveElement = useCallback(target => {
+    elementCallbackMapRef.current.delete(target);
+    intersectionObserverRef.current.unobserve(target);
+  }, []);
+  return {
+    observeElement,
+    unobserveElement
+  };
+}
+
+/**
+ * Custom React hook that monitors the visibility of a referenced DOM element within the viewport
+ * using the Browser Intersection Observer API.
+ *
+ * @returns {IsVisibleInViewPortResult}
+ */
+function useIsVisibleInViewPort() {
+  const wrapperRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const {
+    observeElement,
+    unobserveElement
+  } = useViewPortIntersectionObserver();
+  const handleRefUpdate = useCallback(target => {
+    if (wrapperRef.current) {
+      unobserveElement(wrapperRef.current);
+    }
+    if (target) {
+      observeElement(target, v => {
+        setIsVisible(v);
+      });
+    }
+    setIsVisible(false);
+    wrapperRef.current = target;
+  }, [observeElement, unobserveElement]);
+  return {
+    isVisible,
+    elementRef: handleRefUpdate
+  };
+}
+
 const Avatar = ({
   children,
   color: _color = COLORS['grey-400'],
   size: _size = 'medium',
-  url,
+  url: urlProp,
   badge,
   alt,
   testId
 }) => {
+  const {
+    isVisible,
+    elementRef
+  } = useIsVisibleInViewPort();
+  const url = isVisible ? urlProp : undefined;
   const [showIconInsteadOfImage, setShowIconInsteadOfImage] = useState(false);
   const [defaultProfilePictureColors] = useState(() => PROFILE_IMAGES[Math.floor(Math.random() * PROFILE_IMAGES.length)]);
   // If passing an url we are defaulting to a lighter grey while the image loads
   const backgroundColor = url ? COLORS['grey-200'] : getColor(_color);
   return React__default.createElement("div", {
-    className: classnames(styles$6['avatar__container'])
+    className: classnames(styles$6['avatar__container']),
+    ref: elementRef
   }, React__default.createElement("div", {
     className: classnames(styles$6['avatar'], {
       [styles$6['avatar--small']]: _size === 'small',