@atlaskit/breadcrumbs/dist/esm/components/breadcrumbs-skeleton.js

Breadcrumbs are a navigation system used to show a user's location in a site or app.

/* breadcrumbs-skeleton.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./breadcrumbs-skeleton.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import BreadcrumbsSkeletonItem from './breadcrumbs-skeleton-item';
import { BreadcrumbsSkeletonContext } from './internal/breadcrumbs-skeleton-context';
var styles = {
  nav: "_p12f1osq",
  list: "_1e0c1txw _4cvr1h6o _1n261g80 _2mzuglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t"
};
var defaultItems = [/*#__PURE__*/React.createElement(BreadcrumbsSkeletonItem, {
  key: "home",
  width: 64
}), /*#__PURE__*/React.createElement(BreadcrumbsSkeletonItem, {
  key: "parent",
  width: 96
}), /*#__PURE__*/React.createElement(BreadcrumbsSkeletonItem, {
  key: "current",
  width: 80
})];

/**
 * __BreadcrumbsSkeleton__
 *
 * A placeholder skeleton for breadcrumbs while navigation data is loading.
 */
export default function BreadcrumbsSkeleton(_ref) {
  var children = _ref.children,
    _ref$isShimmering = _ref.isShimmering,
    isShimmering = _ref$isShimmering === void 0 ? true : _ref$isShimmering,
    _ref$label = _ref.label,
    label = _ref$label === void 0 ? 'Loading breadcrumbs' : _ref$label,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'medium' : _ref$size,
    testId = _ref.testId;
  var renderedChildren = React.Children.count(children) > 0 ? children : defaultItems;
  return /*#__PURE__*/React.createElement(BreadcrumbsSkeletonContext.Provider, {
    value: {
      isShimmering: isShimmering,
      size: size
    }
  }, /*#__PURE__*/React.createElement("nav", {
    "aria-busy": "true",
    "aria-label": label,
    className: ax([styles.nav])
  }, /*#__PURE__*/React.createElement("ol", {
    "aria-hidden": "true",
    "data-testid": testId,
    className: ax([styles.list])
  }, renderedChildren)));
}