@primer/react
Version:
An implementation of GitHub's Primer Design System using React
123 lines (122 loc) • 3.32 kB
JavaScript
import Spinner from "../Spinner/Spinner.js";
import { Stack } from "../Stack/Stack.js";
import { SkeletonBox } from "../Skeleton/SkeletonBox.js";
import FilteredActionListLoaders_module_css_default from "./FilteredActionListLoaders.module.css.js";
import { FilteredActionListLoadingTypes } from "./constants.js";
import { c } from "react-compiler-runtime";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
//#region src/FilteredActionList/FilteredActionListLoaders.tsx
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
});
$[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(4);
let props;
if ($[0] !== t0) {
({...props} = t0);
$[0] = t0;
$[1] = props;
} else props = $[1];
let t1;
if ($[2] !== props) {
t1 = /*#__PURE__*/ jsx("div", {
className: FilteredActionListLoaders_module_css_default.LoadingSpinner,
"data-component": "FilteredActionList.Spinner",
children: /*#__PURE__*/ jsx(Spinner, { ...props })
});
$[2] = props;
$[3] = t1;
} else t1 = $[3];
return t1;
}
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 === void 0 ? 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("div", {
className: FilteredActionListLoaders_module_css_default.LoadingSkeletonContainer,
"data-component": "FilteredActionList.Skeleton",
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",
className: FilteredActionListLoaders_module_css_default.LoadingSkeletonRow,
children: [/*#__PURE__*/ jsx(SkeletonBox, {
width: "16px",
height: "16px"
}), /*#__PURE__*/ jsx(SkeletonBox, {
height: "10px",
className: FilteredActionListLoaders_module_css_default.LoadingSkeleton
})]
}, i);
}
_temp.displayName = "_temp";
//#endregion
export { FilteredActionListBodyLoader, FilteredActionListLoadingTypes };