@baseplate-dev/ui-components
Version:
Shared UI component library
24 lines • 1.28 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { cn } from '#src/utils/index.js';
/**
* Loader component that displays a 3-dot loading animation.
* Only shows after the specified delay (default: 300ms) to prevent flashing for quick operations.
*/
function Loader({ className, delay = 300 }) {
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const timer = setTimeout(() => {
setIsVisible(true);
}, delay);
return () => {
clearTimeout(timer);
};
}, [delay]);
if (!isVisible) {
return (_jsx("div", { className: cn('flex h-full items-center justify-center', className) }));
}
return (_jsx("div", { className: cn('flex h-full items-center justify-center', className), role: "progressbar", children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("div", { className: "size-3 animate-pulse rounded-full bg-muted-foreground" }), _jsx("div", { className: "size-3 animate-pulse rounded-full bg-muted-foreground delay-300" }), _jsx("div", { className: "size-3 animate-pulse rounded-full bg-muted-foreground delay-[600ms]" })] }) }));
}
export { Loader };
//# sourceMappingURL=loader.js.map