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

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import { Stack } from '../Stack/Stack.js';
import { SkeletonBox } from '../Skeleton/SkeletonBox.js';
import classes from './FilteredActionListLoaders.module.css.js';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import Box from '../Box/Box.js';
import StyledSpinner from '../Spinner/Spinner.js';

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(t0) {
  const $ = c(4);
  const {
    loadingType,
    height
  } = t0;
  switch (loadingType) {
    case FilteredActionListLoadingTypes.bodySpinner:
      {
        let t1;
        if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
          t1 = /*#__PURE__*/jsx(LoadingSpinner, {
            "data-testid": "filtered-action-list-spinner"
          });
          $[0] = t1;
        } else {
          t1 = $[0];
        }
        return t1;
      }
    case FilteredActionListLoadingTypes.bodySkeleton:
      {
        const rows = height < SKELETON_ROW_HEIGHT ? SKELETON_MIN_ROWS : height / SKELETON_ROW_HEIGHT;
        let t1;
        if ($[1] !== rows) {
          t1 = /*#__PURE__*/jsx(LoadingSkeleton, {
            "data-testid": "filtered-action-list-skeleton",
            rows: rows
          });
          $[1] = rows;
          $[2] = t1;
        } else {
          t1 = $[2];
        }
        return t1;
      }
    default:
      {
        let t1;
        if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
          t1 = /*#__PURE__*/jsx(Fragment, {});
          $[3] = t1;
        } else {
          t1 = $[3];
        }
        return t1;
      }
  }
}
function LoadingSpinner(t0) {
  const $ = c(5);
  let props;
  if ($[0] !== t0) {
    ({
      ...props
    } = t0);
    $[0] = t0;
    $[1] = props;
  } else {
    props = $[1];
  }
  let t1;
  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = {
      alignContent: "center",
      textAlign: "center",
      height: "100%"
    };
    $[2] = t1;
  } else {
    t1 = $[2];
  }
  let t2;
  if ($[3] !== props) {
    t2 = /*#__PURE__*/jsx(Box, {
      p: 3,
      flexGrow: 1,
      sx: t1,
      children: /*#__PURE__*/jsx(StyledSpinner, {
        ...props
      })
    });
    $[3] = props;
    $[4] = t2;
  } else {
    t2 = $[4];
  }
  return t2;
}
function LoadingSkeleton(t0) {
  const $ = c(8);
  let props;
  let t1;
  if ($[0] !== t0) {
    ({
      rows: t1,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = props;
    $[2] = t1;
  } else {
    props = $[1];
    t1 = $[2];
  }
  const rows = t1 === undefined ? 10 : t1;
  let t2;
  if ($[3] !== rows) {
    t2 = Array.from({
      length: rows
    }, _temp);
    $[3] = rows;
    $[4] = t2;
  } else {
    t2 = $[4];
  }
  let t3;
  if ($[5] !== props || $[6] !== t2) {
    t3 = /*#__PURE__*/jsx(Box, {
      p: 2,
      display: "flex",
      flexGrow: 1,
      flexDirection: "column",
      children: /*#__PURE__*/jsx(Stack, {
        direction: "vertical",
        justify: "center",
        gap: "condensed",
        ...props,
        children: t2
      })
    });
    $[5] = props;
    $[6] = t2;
    $[7] = t3;
  } else {
    t3 = $[7];
  }
  return t3;
}
function _temp(_, i) {
  return /*#__PURE__*/jsxs(Stack, {
    direction: "horizontal",
    gap: "condensed",
    align: "center",
    children: [/*#__PURE__*/jsx(SkeletonBox, {
      width: "16px",
      height: "16px"
    }), /*#__PURE__*/jsx(SkeletonBox, {
      height: "10px",
      width: `${Math.random() * 60 + 20}%`,
      className: classes.LoadingSkeleton
    })]
  }, i);
}
_temp.displayName = "_temp";

export { FilteredActionListBodyLoader, FilteredActionListLoadingType, FilteredActionListLoadingTypes };