@vectara/vectara-ui/lib/components/skeleton/Skeleton.js

Vectara's design system, codified as a React and Sass component library

import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import classNames from "classnames";
export const SKELETON_COLOR = ["accent", "primary", "danger", "warning", "success", "neutral", "subdued"];
export const VuiSkeleton = ({ rows = 2.75, color = "subdued", active = true, height = "1rem", className }) => {
    const classes = classNames(className, "vuiSkeleton__row", `vuiSkeleton--${color}`, {
        "vuiSkeleton--active": active
    });
    const fullRows = Math.floor(rows);
    const partialRowWidth = rows % 1;
    const renderRows = () => {
        const rowElements = [];
        // Render full rows
        for (let i = 0; i < fullRows; i++) {
            rowElements.push(_jsx("div", { className: classes, style: { height } }, `full-${i}`));
        }
        // Render partial row if there's a decimal component
        if (partialRowWidth > 0) {
            rowElements.push(_jsx("div", { className: classes, style: { width: `${partialRowWidth * 100}%`, height } }, "partial"));
        }
        return rowElements;
    };
    return (_jsx(_Fragment, { children: renderRows() }));
};