@bigbinary/neeto-molecules 1.11.0 → 1.11.1

package/dist/cjs/Sidebar.js

@@ -1100,7 +1100,7 @@ var Segment = function Segment(_ref) {
   }));
 };
 
-var _excluded$1 = ["data-cy", "to", "label", "type", "count", "columns", "filters", "id"];
+var _excluded$1 = ["data-cy", "to", "label", "type", "count", "columns", "filters", "id", "isCountsLoading"];
 var SubLink = function SubLink(_ref) {
   var dataCy = _ref["data-cy"],
     to = _ref.to,
@@ -1111,6 +1111,7 @@ var SubLink = function SubLink(_ref) {
     columns = _ref.columns,
     filters = _ref.filters,
     id = _ref.id,
+    isCountsLoading = _ref.isCountsLoading,
     otherProps = _objectWithoutProperties(_ref, _excluded$1);
   var segment = {
     id: id,
@@ -1126,6 +1127,9 @@ var SubLink = function SubLink(_ref) {
     });
   }
   var dataCyPrefix = dataCy || neetoCist.hyphenate(label);
+  var renderCount = function renderCount(count) {
+    return count > 999 ? "999+" : count;
+  };
   return /*#__PURE__*/React__default["default"].createElement(CheckPointNavLinks, _extends({
     to: to,
     activeClassName: "active",
@@ -1144,15 +1148,17 @@ var SubLink = function SubLink(_ref) {
     component: "span",
     "data-cy": "".concat(dataCyPrefix, "-sub-link-count"),
     style: "body2"
-  }, count > 999 ? "999+" : count));
+  }, isCountsLoading ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-rounded neeto-ui-bg-gray-200 h-4 w-4 animate-pulse"
+  }) : renderCount(count)));
 };
 
-var _excluded = ["label", "to", "icon", "items"];
+var _excluded = ["label", "to", "icon", "items", "isCountsLoading"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Links = function Links(_ref) {
   var navLinks = _ref.navLinks,
-    isCountsLoading = _ref.isCountsLoading;
+    isCountsLoadingDeprecated = _ref.isCountsLoading;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var location = reactRouterDom.useLocation();
@@ -1183,13 +1189,15 @@ var Links = function Links(_ref) {
       to = _ref3.to,
       icon = _ref3.icon,
       items = _ref3.items,
+      _ref3$isCountsLoading = _ref3.isCountsLoading,
+      isCountsLoading = _ref3$isCountsLoading === void 0 ? false : _ref3$isCountsLoading,
       otherProps = _objectWithoutProperties(_ref3, _excluded);
     var IconSVG = icon;
     var url = new URL(to, window.location.href);
     var isActive = function isActive() {
       return ramda.is(Function, otherProps.isActive) ? otherProps.isActive() : location.pathname.startsWith(url.pathname);
     };
-    var isMenuExpanded = isActive() && isActiveLinkExpanded && !isCountsLoading;
+    var isMenuExpanded = isActive() && isActiveLinkExpanded && !isCountsLoadingDeprecated;
     var firstSegmentIndex = neetoCist._findIndexBy({
       type: SUB_LINK_TYPES.SEGMENT
     }, items);
@@ -1229,7 +1237,9 @@ var Links = function Links(_ref) {
         className: "neeto-molecules-sidebar-segments-header neeto-ui-text-transform-capitalize neeto-ui-text-gray-600 py-2 uppercase",
         style: "body3",
         weight: "semibold"
-      }, t("neetoMolecules.sidebar.segments.segment", constants.PLURAL)), /*#__PURE__*/React__default["default"].createElement(SubLink, _extends({}, subItem, {
+      }, t("neetoMolecules.sidebar.segments.segment", constants.PLURAL)), /*#__PURE__*/React__default["default"].createElement(SubLink, _extends({}, _objectSpread(_objectSpread({}, subItem), {}, {
+        isCountsLoading: isCountsLoading
+      }), {
         columns: otherProps.columns
       })));
     })));