@platformbuilders/fluid-react/dist/components/LoadingIndicator/index.js

Builders React for Fluid Design System

import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import animations from '../../theme/animations';
const loadingVariant = ({ variant, contrast, }) => {
    switch (variant) {
        case 'button':
            return contrast
                ? animations.contrastButtonLoading
                : animations.buttonLoading;
        case 'linear':
            return contrast
                ? animations.contrastLinearLoading
                : animations.linearLoading;
        default:
            return contrast
                ? animations.contrastCircularLoading
                : animations.circularLoading;
    }
};
const smallSize = {
    width: 60,
    height: 60,
};
const largeSize = {
    width: 120,
    height: 120,
};
const LoadingIndicator = ({ large = false, contrast = false, variant = 'circular', accessibility, }) => {
    const ref = useRef(null);
    const loadAnimation = async () => {
        if (ref.current) {
            const animationData = loadingVariant({ variant, contrast });
            const lottie = await import('lottie-web');
            lottie.default.loadAnimation({
                container: ref.current,
                renderer: 'svg',
                loop: true,
                autoplay: true,
                animationData,
            });
        }
    };
    useEffect(() => {
        loadAnimation();
    }, [ref]);
    return (_jsx("div", { ref: ref, style: large ? largeSize : smallSize, id: "loading", "aria-label": accessibility || 'Aguarde...' }));
};
export default LoadingIndicator;