该组件主要是anted的组件中自带的loading属性，

1、封装loading组件

import React from 'react';

function WithLoading(WrappedComponent: React.ComponentType<any>) {
  return (props: any) => {
    const [isLoading, setIsLoading] = React.useState(true);

    React.useEffect(() => {
      // 模拟异步加载
      const timer = setTimeout(() => {
        setIsLoading(false);
      }, 1200);

      // 清理定时器
      return () => clearTimeout(timer);
    }, []);

    return <WrappedComponent {...props} isLoading={isLoading} />;
  };
}

export default WithLoading;

2、使用loading组件

import { Card } from "antd";
import React from "react";
import WithLoading from '@/components/withLoading';
const DesigneerPage: React.FC = (props) => {
  return (
    <div style={{ margin: "20px",textAlign:'center' }}>
      <Card loading={props.isLoading}>
      我知道你很急，但是不要急，还在开发中....
      </Card>
    </div>
  );
};
export default WithLoading(DesigneerPage);

注意事项：

1、封装的时候要用高阶组件，因为要传入组件

2、通过属性的方式传递loading 

3、注意跟antd组件的Spin组件的区别（因为是属性，所以有时候加载方式用的是第一个这样的，比如表格）

spin组件：

本次封装的加载效果：