@lunit/oui
Version:
Lunit Oncology UI components
11 lines (10 loc) • 1.09 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/* eslint-disable @typescript-eslint/no-var-requires */
import { Player } from '@lottiefiles/react-lottie-player';
import { LoadingOverlay, LoadingIndicatorBox, LoadingMessage, LoadingDetails, } from './LoadingIndicator.styled';
const DotLoadingAnimation = require('./assets/DotLoadingAnimation.json');
const DnaLoadingAnimation = require('./assets/DnaLoadingAnimation.json');
const LoadingIndicator = ({ message, details, loadingAnimation = 'dot', dataTestId = 'loading-indicator', }) => {
return (_jsx(LoadingOverlay, { children: _jsxs(LoadingIndicatorBox, { "data-testid": dataTestId, children: [_jsx(Player, { autoplay: true, loop: true, src: loadingAnimation === 'dot' ? DotLoadingAnimation : DnaLoadingAnimation, style: { height: '112px', width: '140px' } }), _jsx(LoadingMessage, { children: message }), _jsx(LoadingDetails, { children: details || (_jsxs(_Fragment, { children: ["Please wait.", _jsx("br", {}), "It may take a few minutes."] })) })] }) }));
};
export default LoadingIndicator;