@atlaskit/breadcrumbs/dist/es2019/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';
const styles = {
  nav: "_p12f1osq",
  list: "_1e0c1txw _4cvr1h6o _1n261g80 _2mzuglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t"
};
const 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({
  children,
  isShimmering = true,
  label = 'Loading breadcrumbs',
  size = 'medium',
  testId
}) {
  const renderedChildren = React.Children.count(children) > 0 ? children : defaultItems;
  return /*#__PURE__*/React.createElement(BreadcrumbsSkeletonContext.Provider, {
    value: {
      isShimmering,
      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)));
}