dumi-theme-antd/dist/common/Loading/index.js

Ant Design 5.0 官网风格类似的 dumi2 主题插件

import React, { useCallback } from 'react';
import { Skeleton, Space, Spin } from 'antd';
import { useLocation } from 'dumi';
import useAdditionalThemeConfig from "../../hooks/useAdditionalThemeConfig";
import { jsx as ___EmotionJSX } from "@emotion/react";
var defaultLoadingConfig = {
  skeleton: []
};
var Loading = function Loading() {
  var _useLocation = useLocation(),
    pathname = _useLocation.pathname;
  var _useAdditionalThemeCo = useAdditionalThemeConfig(),
    _useAdditionalThemeCo2 = _useAdditionalThemeCo.loading,
    loading = _useAdditionalThemeCo2 === void 0 ? defaultLoadingConfig : _useAdditionalThemeCo2;
  var skeletonLoadingRenderRule = useCallback(function () {
    var pathnameReg = loading.skeleton;
    if (pathnameReg) {
      return pathnameReg.filter(function (rule) {
        return pathname.startsWith(rule);
      }).length > 0;
    }
    return false;
  }, [loading, pathname]);
  if (skeletonLoadingRenderRule()) {
    return ___EmotionJSX("div", {
      style: {
        maxWidth: '70vw',
        width: '100%',
        margin: '80px auto 0',
        textAlign: 'center'
      }
    }, ___EmotionJSX("img", {
      src: "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg",
      width: 40,
      alt: "loading",
      style: {
        marginBottom: 24,
        filter: 'grayscale(1)',
        opacity: 0.33
      }
    }), ___EmotionJSX(Skeleton, {
      active: true,
      paragraph: {
        rows: 3
      }
    }), ___EmotionJSX(Skeleton, {
      active: true,
      paragraph: {
        rows: 4
      },
      style: {
        marginTop: 32
      }
    }));
  }
  return ___EmotionJSX(Space, {
    style: {
      width: '100%',
      margin: '120px 0',
      justifyContent: 'center'
    },
    align: "center"
  }, ___EmotionJSX(Spin, {
    size: "large"
  }));
};
export default Loading;