How to change default Loading Spinner for Ant Design Pro

Question

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!

Answer 1

A new way to doing this. You can define default spin element globally.

//top of app.tsx

import { Spin } from 'antd';
Spin.setDefaultIndicator(<div>Loading</div>);

ant design pro referance https://ant.design/components/spin/#Static-Method

Answer 2

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;