@primer/react/lib-esm/FilteredActionList/FilteredActionListLoaders.js

An implementation of GitHub's Primer Design System using React

import React from 'react';
import Box from '../Box/Box.js';
import StyledSpinner from '../Spinner/Spinner.js';
import { Stack } from '../Stack/Stack.js';
import { SkeletonBox } from '../experimental/Skeleton/SkeletonBox.js';

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
class FilteredActionListLoadingType {
  constructor(name, appearsInBody) {
    this.name = name;
    this.appearsInBody = appearsInBody;
  }
}
const FilteredActionListLoadingTypes = {
  bodySpinner: new FilteredActionListLoadingType('body-spinner', true),
  bodySkeleton: new FilteredActionListLoadingType('body-skeleton', true),
  input: new FilteredActionListLoadingType('input', false)
};
const SKELETON_ROW_HEIGHT = 24;
const SKELETON_MIN_ROWS = 3;
function FilteredActionListBodyLoader({
  loadingType,
  height
}) {
  switch (loadingType) {
    case FilteredActionListLoadingTypes.bodySpinner:
      return /*#__PURE__*/React.createElement(LoadingSpinner, {
        "data-testid": "filtered-action-list-spinner"
      });
    case FilteredActionListLoadingTypes.bodySkeleton:
      {
        const rows = height < SKELETON_ROW_HEIGHT ? SKELETON_MIN_ROWS : height / SKELETON_ROW_HEIGHT;
        return /*#__PURE__*/React.createElement(LoadingSkeleton, {
          "data-testid": "filtered-action-list-skeleton",
          rows: rows
        });
      }
    default:
      return /*#__PURE__*/React.createElement(React.Fragment, null);
  }
}
function LoadingSpinner({
  ...props
}) {
  return /*#__PURE__*/React.createElement(Box, {
    p: 3,
    flexGrow: 1,
    sx: {
      alignContent: 'center',
      textAlign: 'center',
      height: '100%'
    }
  }, /*#__PURE__*/React.createElement(StyledSpinner, props));
}
LoadingSpinner.displayName = "LoadingSpinner";
function LoadingSkeleton({
  rows = 10,
  ...props
}) {
  return /*#__PURE__*/React.createElement(Box, {
    p: 2,
    display: "flex",
    flexGrow: 1,
    flexDirection: "column"
  }, /*#__PURE__*/React.createElement(Stack, _extends({
    direction: "vertical",
    justify: "center",
    gap: "condensed"
  }, props), Array.from({
    length: rows
  }, (_, i) => /*#__PURE__*/React.createElement(Stack, {
    key: i,
    direction: "horizontal",
    gap: "condensed",
    align: "center"
  }, /*#__PURE__*/React.createElement(SkeletonBox, {
    width: "16px",
    height: "16px"
  }), /*#__PURE__*/React.createElement(SkeletonBox, {
    height: "10px",
    width: `${Math.random() * 60 + 20}%`,
    sx: {
      borderRadius: '4px'
    }
  })))));
}
LoadingSkeleton.displayName = "LoadingSkeleton";

export { FilteredActionListBodyLoader, FilteredActionListLoadingType, FilteredActionListLoadingTypes };