@navinc/base-react-components/dist/wayfinder/loading-shimmer-text/loading-shimmer-text.js

Nav's Pattern Library

import { jsx as _jsx } from "react/jsx-runtime";
import { cn } from '../../cn.js';
/**
 *
 * @param text - The text to display
 * @param className - Additional class names to apply to the text. You can change the color of the shimmer effect by using the `from`, `via`, and `to` classes. Keep the from and to classes the same color to create a solid shimmer effect.
 * @returns A loading shimmer text component that displays a shimmering effect on the provided text.
 */
export const LoadingShimmerText = ({ text, className }) => {
    return (_jsx("div", { className: "gap-2 flex items-center", children: _jsx("div", { className: cn('from-onSurfaceVariant via-outlineVariant from-10% via-[15%] to-[30%] to-onSurfaceVariant inline-block bg-gradient-to-r bg-[length:200%_100%] bg-clip-text text-transparent animate-[shimmer_2.5s_infinite_linear]', className), "data-testid": "loading-shimmer-text", children: text }) }));
};
//# sourceMappingURL=loading-shimmer-text.js.map