@ant-design/pro-flow/es/CanvasLoading/index.js

A React based Flow components

import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
var _templateObject, _templateObject2, _templateObject3;
import { createStyles } from 'antd-style';
import { isNull } from 'lodash-es';
import { rgba } from 'polished';
import { memo } from 'react';
import { Center } from 'react-layout-kit';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
var useStyles = createStyles(function (_ref) {
  var css = _ref.css,
    token = _ref.token;
  return {
    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 100;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    height: 100%;\n\n    background: ", ";\n    backdrop-filter: blur(20px);\n  "])), rgba(token.colorBgContainer, 0.5)),
    loader: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 20px;\n    aspect-ratio: 1;\n    border-radius: 50%;\n    background: ", ";\n    box-shadow: 0 0 0 0 ", ";\n    animation: l2 1.5s infinite linear;\n    position: relative;\n\n    &:before,\n    &:after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      box-shadow: 0 0 0 0 ", ";\n      animation: inherit;\n      animation-delay: -0.5s;\n    }\n\n    &:after {\n      animation-delay: -1s;\n    }\n\n    @keyframes l2 {\n      100% {\n        box-shadow: 0 0 0 40px ", ";\n      }\n    }\n  "])), token.colorText, rgba(token.colorText, 0.2), rgba(token.colorText, 0.2), rgba(token.colorText, 0)),
    tip: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextPlaceholder)
  };
});
var CanvasLoading = /*#__PURE__*/memo(function (_ref2) {
  var children = _ref2.children,
    loading = _ref2.loading,
    _ref2$tip = _ref2.tip,
    tip = _ref2$tip === void 0 ? '画布初始化...' : _ref2$tip;
  var _useStyles = useStyles(),
    styles = _useStyles.styles;
  var content = /*#__PURE__*/_jsxs(Center, {
    gap: 12,
    className: styles.container,
    children: [/*#__PURE__*/_jsx(Center, {
      width: 100,
      height: 100,
      children: /*#__PURE__*/_jsx("div", {
        className: styles.loader
      })
    }), !isNull(tip) && /*#__PURE__*/_jsx("div", {
      className: styles.tip,
      children: tip
    })]
  });
  if (!children) return content;
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [typeof loading === 'undefined' ? content : loading ? content : null, children]
  });
});
export default CanvasLoading;