I searched but can't seem to figure out how to change the default loading spinner that is generated with Ant Design Pro V4. I used the generator and ran npm create umi myApp
. There is a default four circle spinner that I would like to replace with a customized spinner.
The default loader is located here:
#/myApp/config/config.ts
...
dynamicImport: {
loading: '@/components/PageLoading/index',
},
...
When I modified the PageLoading/index.tsx
page based on Ant Design's customer spinner documentation. I kept getting this error.
Error: Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: object.
Check the render method of `LoadableComponent`.
original PageLoading/index.tsx
import { PageLoading } from '@ant-design/pro-layout';
// loading components from code split
// https://umijs.org/plugin/umi-plugin-react.html#dynamicimport
export default PageLoading;
modified PageLoading/index.tsx
import { Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
const CustomSpinner = <Spin indicator={antIcon} />
export default CustomSpinner;
What do I need to do to make it a LoadableComponent
? Thanks!
Return value should be a component. Either function or class component.
This would work:
import react from 'react';
import { Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
// Return value should be component
const CustomSpinner = () => <Spin indicator={antIcon} />
export default CustomSpinner;