pagamio-frontend-commons-lib/lib/components/ui/Loader.js

Pagamio library for Frontend reusable components like the form engine and table container

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Loader as MantineLoader } from '@mantine/core';
import { useEffect, useRef, useState } from 'react';
import { cn } from '../../helpers';
const LoaderComponent = ({ size = 'xl', colorClassName = 'primary-500', variant = 'bars', className = '', }) => {
    const [computedColor, setComputedColor] = useState('rgb(160, 73, 154)');
    const colorElementRef = useRef(null);
    useEffect(() => {
        if (colorElementRef.current) {
            // Create a temporary element to compute the color style
            const tempElement = document.createElement('div');
            tempElement.className = colorClassName;
            tempElement.style.display = 'none';
            document.body.appendChild(tempElement);
            // Get the computed color
            const style = window.getComputedStyle(tempElement);
            const colorValue = style.color;
            // Clean up
            document.body.removeChild(tempElement);
            if (colorValue && colorValue !== 'rgba(0, 0, 0, 0)') {
                setComputedColor(colorValue);
            }
        }
    }, [colorClassName]);
    return (_jsxs("div", { className: cn('inline-block', className), children: [_jsx("div", { ref: colorElementRef, className: colorClassName, style: { display: 'none' } }), _jsx(MantineLoader, { color: computedColor, variant: variant, size: size })] }));
};
export default LoaderComponent;