@7shifts/sous-chef 4.10.0 → 4.10.3

package/dist/index.js

@@ -20727,14 +20727,25 @@ var Avatar = function Avatar(_ref) {
   var _useIsVisibleInViewPo = useIsVisibleInViewPort(),
     isVisible = _useIsVisibleInViewPo.isVisible,
     elementRef = _useIsVisibleInViewPo.elementRef;
-  var 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).
   var _useState = React.useState(false),
-    showIconInsteadOfImage = _useState[0],
-    setShowIconInsteadOfImage = _useState[1];
-  var _useState2 = React.useState(function () {
+    hasBeenVisible = _useState[0],
+    setHasBeenVisible = _useState[1];
+  React.useEffect(function () {
+    if (isVisible && !hasBeenVisible) {
+      setHasBeenVisible(true);
+    }
+  }, [isVisible, hasBeenVisible]);
+  var url = hasBeenVisible ? urlProp : undefined;
+  var _useState2 = React.useState(false),
+    showIconInsteadOfImage = _useState2[0],
+    setShowIconInsteadOfImage = _useState2[1];
+  var _useState3 = React.useState(function () {
       return PROFILE_IMAGES[Math.floor(Math.random() * PROFILE_IMAGES.length)];
     }),
-    defaultProfilePictureColors = _useState2[0];
+    defaultProfilePictureColors = _useState3[0];
   // If passing an url we are defaulting to a lighter grey while the image loads
   var backgroundColor = url ? COLORS['surface-container-highest'] : getColor(color);
   return React__default["default"].createElement("div", {