@dnb/eufemia/es/components/skeleton/figures/Circle.js

DNB Eufemia Design System UI Library

import React, { useMemo } from 'react';
import Space from "../../space/Space.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function SkeletonCircle({
  rows = 3,
  children = null,
  ...rest
}) {
  const rowsLength = useMemo(() => {
    const fill = [70, 80, 60, 40, 50, 20, 0];
    return new Array(Number(rows)).fill(true).map((_, i) => {
      const c = i % fill.length;
      if (c === fill.length - 1) {
        fill.concat(fill.reverse());
      }
      return fill[c];
    });
  }, [rows]);
  return _jsxs("div", {
    className: "dnb-skeleton__figure dnb-skeleton__figure--show",
    "aria-busy": true,
    ...rest,
    children: [_jsx(Space, {
      element: "div",
      bottom: "large",
      className: "dnb-h--xx-large dnb-skeleton dnb-skeleton--shape",
      "aria-hidden": true,
      style: {
        width: '50%'
      },
      children: "\u200C"
    }), rowsLength.map((p, i) => _jsx(Space, {
      element: "div",
      top: "x-small",
      className: "dnb-p dnb-skeleton dnb-skeleton--shape",
      style: {
        width: `${p}%`
      },
      children: "\u200C"
    }, i)), typeof children === 'function' ? children() : children]
  });
}
export default SkeletonCircle;
//# sourceMappingURL=Circle.js.map