@ima/plugin-atoms/dist/cjs/components/Loader.js

IMA.js UI React atoms

"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "Loader", {
    enumerable: true,
    get: function() {
        return Loader;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _reactpagerenderer = require("@ima/react-page-renderer");
const _react = require("react");
const _constants = require("./constants");
const _filterProps = require("./filterProps");
const Loader = /*#__PURE__*/ (0, _react.memo)(function LoaderComponent({ timeout, center, color, className, ...rest }) {
    const { $CssClasses } = (0, _reactpagerenderer.useComponentUtils)();
    const [showLoader, setShowLoader] = (0, _react.useState)(false);
    const timer = (0, _react.useRef)();
    const attributes = (0, _filterProps.filterProps)(rest, _constants.DIV_ATTRIBUTES);
    (0, _react.useEffect)(()=>{
        if (!timeout) {
            setShowLoader(true);
        }
        if (timeout && !timer.current) {
            timer.current = setTimeout(()=>{
                setShowLoader(true);
            }, timeout);
        }
        return ()=>{
            clearTimeout(timer.current);
        };
    }, [
        timeout
    ]);
    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
        children: showLoader && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
            ...attributes,
            className: $CssClasses({
                'atm-loader': true,
                ['atm-loader-center']: center
            }, className),
            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                className: $CssClasses({
                    'atm-loader-animation': true,
                    ['atm-loader-animation-' + color]: color
                })
            })
        })
    });
});

//# sourceMappingURL=Loader.js.map