@geneui/components/BusyLoader/index.js

The Gene UI components library designed for BI tools

import React__default from 'react';
import { c as classnames } from '../index-031ff73c.js';
import Icon from '../Icon/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import 'prop-types';

const BusyLoaderHolderHOC = ({ children, loadingText, className }) => {
    return (React__default.createElement("div", { className: classnames('loader-holder', className) },
        children,
        loadingText && React__default.createElement("div", { className: "loader-text" }, loadingText)));
};

var css_248z = "[data-gene-ui-version=\"2.16.5\"] .loader-holder{align-items:center;color:var(--hero);display:flex;flex-direction:column;margin:auto;position:relative;text-align:center}[data-gene-ui-version=\"2.16.5\"] .loader-holder.p-static{margin:6rem}[data-gene-ui-version=\"2.16.5\"] .loader-holder.p-absolute{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}[data-gene-ui-version=\"2.16.5\"] .loader-holder .s-medium{font-size:2.8rem}[data-gene-ui-version=\"2.16.5\"] .loader-holder .s-big{font-size:5.4rem}[data-gene-ui-version=\"2.16.5\"] .loader-text{font:600 1.6rem/2rem var(--font-family);margin:1rem 0 0}[data-gene-ui-version=\"2.16.5\"] .bubble-loader{animation:sk-rotate 2s linear infinite;height:6.6rem;position:relative;width:6.6rem}@keyframes sk-rotate{to{transform:rotate(1turn)}}[data-gene-ui-version=\"2.16.5\"] .bubble-loader .dot{animation:sk-bounce 2s ease-in-out infinite;background:var(--hero);border-radius:100%;height:60%;position:absolute;top:0;width:60%}@keyframes sk-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}[data-gene-ui-version=\"2.16.5\"] .bubble-loader .dot2{animation-delay:-1s;bottom:0;top:auto}[data-gene-ui-version=\"2.16.5\"] .bar-loader{height:.6rem;left:0;overflow:hidden;position:fixed;top:calc(var(--header-height, .6rem) - .6rem);width:100%}[data-gene-ui-version=\"2.16.5\"] .bar-loader:before{animation:bar-loader .8s linear infinite;background:linear-gradient(270deg,#7eb8ff 30%,#8d14e6 50%,#7eb8ff 70%) no-repeat 50% 50%/100vw .6rem;content:\"\";display:block;height:100%;left:50%;max-width:0;opacity:0;overflow:hidden;position:absolute;top:0;transform:translateX(-50%);width:100%}@keyframes bar-loader{0%,to{opacity:0}10%,90%{opacity:1}0%{max-width:0}to{max-width:100%}}";
styleInject(css_248z);

const BusyLoader = ({ type = 'spinner', isBusy = true, children = null, className, loadingText, spinnerSize = 'small' }) => {
    const loaders = {
        bar: React__default.createElement("div", { className: "bar-loader" }),
        spinner: (React__default.createElement(BusyLoaderHolderHOC, { className: className, loadingText: loadingText }, 
        // @ts-ignore
        React__default.createElement(Icon, { type: `bc-icon-loader s-${spinnerSize}` }))),
        bubbles: (React__default.createElement(BusyLoaderHolderHOC, { className: className, loadingText: loadingText },
            React__default.createElement("div", { className: "bubble-loader" },
                React__default.createElement("div", { className: "dot dot1" }),
                React__default.createElement("div", { className: "dot dot2" }))))
    };
    return isBusy ? React__default.createElement(React__default.Fragment, null, loaders[type]) : children;
};

export { BusyLoader as default };