Ant Design react - change default spinner for all components

user_5639469 0
Viewed 1027

I need to change the default spinner for all components at once. How can I achieve that?

antd reactjs spinner
1 Answers

The Table component of Antd is having loading props. Generally, a boolean value is used for loading status to display or hide the Spinner, which is correct. But one can also add object instead of boolean.

enter image description here

On clicking object, it'll redirect you to Spin Antd component API.

enter image description here

As you can see, there are multiple properties of <Spinner /> component and we can use these in <Table loading={{size: 'large'}} />. But the one which we need is indicator property because it accepts ReactNode. So, now the things which are left is to add the <Loader /> from react-loader-spinner.

import Loader from "react-loader-spinner";
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";

const Demo extends React.Component {
  render() {
    const loaderIcon = (
        <Loader type="Puff" color="#00BFFF" height={200} width={200} />
    );
    
    return (
      <Table
        {...this.state}
        loading={{ indicator: loaderIcon }}
        pagination={{ position: [this.state.top, this.state.bottom] }}
        columns={tableColumns}
        dataSource={state.hasData ? data : null}
        scroll={scroll}
      />  
    );
  }
}

Sorry for this huge code, I forked Antd example and then edited things inside that.

Antd Table Dynamic settings code

user_84379740
Related