import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
/**
 * . .. ... . .. ...
 **/
/**
 * A simple loading indicator that shows animated dots.
 * It displays a rotating sequence of dots to indicate that something is loading.
 */
export default function LoaderDotsIndicator({ dotsCount = 3, lockSize = false, }) {
    const [text, setText] = useState(".");
    useEffect(() => {
        const fullText = new Array(dotsCount).fill(".").join("");
        const intervalId = setInterval(() => {
            setText((a) => (a === fullText ? "." : a + "."));
        }, 250);
        return () => clearInterval(intervalId);
    }, [dotsCount]);
    return (_jsxs(_Fragment, { children: [text, lockSize && (_jsx("span", { style: { color: "#0000" }, children: new Array(dotsCount - text.length).fill(".") }))] }));
}
//# sourceMappingURL=LoaderDotsIndicator.js.map