@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
105 lines • 5.85 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.KPICardSkeleton = void 0;
var tslib_1 = require("tslib");
var react_components_1 = require("@fluentui/react-components");
var React = tslib_1.__importStar(require("react"));
var Stack_1 = tslib_1.__importDefault(require("./stack/Stack"));
var useKpiStyles_1 = require("./useKpiStyles");
var css_1 = require("@emotion/css");
/**
* Skeleton loading state for KPICard component.
* Mimics the exact layout of KPICard while data is being fetched.
*/
var KPICardSkeleton = function () {
var styles = (0, useKpiStyles_1.useKpiStyles)();
var skeletonStyles = {
headerTitle: (0, css_1.css)({
width: "120px",
height: "16px",
}),
headerBadge: (0, css_1.css)({
width: "32px",
height: "32px",
borderRadius: "50%",
}),
mainValue: (0, css_1.css)({
width: "80px",
height: "42px",
}),
goalText: (0, css_1.css)({
width: "70px",
height: "16px",
}),
progressLabel: (0, css_1.css)({
width: "80px",
height: "12px",
}),
progressValue: (0, css_1.css)({
width: "50px",
height: "12px",
}),
progressBar: (0, css_1.css)({
width: "100%",
height: "8px",
borderRadius: "4px",
}),
footerIcon: (0, css_1.css)({
width: "16px",
height: "16px",
borderRadius: "4px",
}),
footerLabel: (0, css_1.css)({
width: "50px",
height: "10px",
}),
footerValue: (0, css_1.css)({
width: "40px",
height: "14px",
}),
badge: (0, css_1.css)({
width: "90px",
height: "32px",
borderRadius: "20px",
}),
};
return (React.createElement(react_components_1.Card, { className: styles.card },
React.createElement(react_components_1.Skeleton, { animation: "pulse" },
React.createElement(Stack_1.default, { gap: "m", padding: "m" },
React.createElement(react_components_1.CardHeader, { header: React.createElement(Stack_1.default, { direction: "horizontal", alignItems: "center", gap: "8px" },
React.createElement(react_components_1.SkeletonItem, { className: skeletonStyles.headerTitle })), action: React.createElement(react_components_1.SkeletonItem, { className: skeletonStyles.headerBadge, shape: "circle" }) }),
React.createElement(Stack_1.default, { gap: "s", direction: "horizontal", alignItems: "baseline", paddingTop: "s" },
React.createElement(react_components_1.SkeletonItem, { className: skeletonStyles.mainValue }),
React.createElement(react_components_1.SkeletonItem, { className: skeletonStyles.goalText })),
React.createElement(Stack_1.default, { gap: "s" },
React.createElement(Stack_1.default, { direction: "horizontal", justifyContent: "space-between" },
React.createElement(react_components_1.SkeletonItem, { className: skeletonStyles.progressLabel }),
React.createElement(react_components_1.SkeletonItem, { className: skeletonStyles.progressValue })),
React.createElement(react_components_1.SkeletonItem, { className: skeletonStyles.progressBar })),
React.createElement(react_components_1.CardFooter, null,
React.createElement(Stack_1.default, { direction: "vertical", alignItems: "center", gap: "xs" },
React.createElement(react_components_1.SkeletonItem, { className: skeletonStyles.footerIcon }),
React.createElement(react_components_1.SkeletonItem, { className: skeletonStyles.footerLabel }),
React.createElement(react_components_1.SkeletonItem, { className: skeletonStyles.footerValue })),
React.createElement(react_components_1.Divider, { vertical: true, style: {
height: "32px",
borderColor: react_components_1.tokens.colorNeutralStroke1,
} }),
React.createElement(Stack_1.default, { direction: "vertical", alignItems: "center", gap: "xs" },
React.createElement(react_components_1.SkeletonItem, { className: skeletonStyles.footerIcon }),
React.createElement(react_components_1.SkeletonItem, { className: skeletonStyles.footerLabel }),
React.createElement(react_components_1.SkeletonItem, { className: skeletonStyles.footerValue })),
React.createElement(react_components_1.Divider, { vertical: true, style: {
height: "32px",
borderColor: react_components_1.tokens.colorNeutralStroke1,
} }),
React.createElement(Stack_1.default, { direction: "vertical", alignItems: "center", gap: "xs" },
React.createElement(react_components_1.SkeletonItem, { className: skeletonStyles.footerIcon }),
React.createElement(react_components_1.SkeletonItem, { className: skeletonStyles.footerLabel }),
React.createElement(react_components_1.SkeletonItem, { className: skeletonStyles.footerValue }))),
React.createElement(Stack_1.default, null,
React.createElement(react_components_1.SkeletonItem, { className: skeletonStyles.badge }))))));
};
exports.KPICardSkeleton = KPICardSkeleton;
exports.default = exports.KPICardSkeleton;
//# sourceMappingURL=KpiCardSkeleton.js.map