@itwin/itwinui-react/DEV-esm/core/Menu/MenuItemSkeleton.js

A react component library for iTwinUI

import * as React from 'react';
import cx from 'classnames';
import { Box } from '../../utils/index.js';
import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
export const MenuItemSkeleton = React.forwardRef((props, forwardedRef) => {
  let {
    hasSublabel,
    hasIcon,
    contentWidth,
    translatedStrings = {
      loading: 'Loading…',
    },
    className,
    style,
    ...rest
  } = props;
  return React.createElement(
    Box,
    {
      className: cx('iui-menu-item-skeleton', className),
      'data-iui-size': hasSublabel && 'large',
      style: {
        '--iui-menu-item-content-skeleton-max-width': contentWidth,
        ...style,
      },
      ref: forwardedRef,
      ...rest,
    },
    hasIcon &&
      React.createElement(Box, {
        className: 'iui-icon iui-skeleton',
        'aria-hidden': true,
      }),
    React.createElement(
      Box,
      {
        as: 'span',
        className: 'iui-content',
      },
      React.createElement(Box, {
        className: 'iui-menu-label iui-skeleton',
        'aria-hidden': true,
      }),
      hasSublabel &&
        React.createElement(Box, {
          className: 'iui-menu-description iui-skeleton',
          'aria-hidden': true,
        }),
      React.createElement(VisuallyHidden, null, translatedStrings.loading),
    ),
  );
});
if ('development' === process.env.NODE_ENV)
  MenuItemSkeleton.displayName = 'MenuItemSkeleton';