@7shifts/sous-chef 4.10.0 → 4.10.3

package/dist/index.modern.js

@@ -20572,7 +20572,16 @@ const Avatar = ({
     isVisible,
     elementRef
   } = useIsVisibleInViewPort();
-  const url = isVisible ? urlProp : undefined;
+  // Latch visibility: unloading the image when the avatar leaves the
+  // viewport makes it flash the fallback colors when it re-enters (e.g.
+  // inside a scroll-away nav bar).
+  const [hasBeenVisible, setHasBeenVisible] = useState(false);
+  useEffect(() => {
+    if (isVisible && !hasBeenVisible) {
+      setHasBeenVisible(true);
+    }
+  }, [isVisible, hasBeenVisible]);
+  const url = hasBeenVisible ? 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