Applying loader in table before noDataText display and after page change

Hi, I have two problems after adding a loader to the table. 1- If there are no data to display, noDataText is not displayed and the loader remains displayed. 2- When changing pages, the loader is not displayed during data loading. My skeleton code is as follows:

class PaginationTable extends Component {  

  constructor(props) {
    super(props);
    this.state = {
      items:[],      
      totalSize: 0,
      page: 1,
      sizePerPage: 10,
      isDataFetched: false,      
    };  
    this.fetchData = this.fetchData.bind(this);  
    this.handlePageChange = this.handlePageChange.bind(this);
    this.handleSizePerPageChange = this.handleSizePerPageChange.bind(this);
    this.setTableOption = this.setTableOption.bind(this);      
    this.options = {
      onPageChange: this.handlePageChange,
      onSizePerPageList: this.handleSizePerPageChange,
      page: this.state.page,
      sizePerPage: this.state.sizePerPage,
      paginationShowsTotal: this.renderShowsTotal,
      pageStartIndex: 1,  
      noDataText: this.setTableOption()
    }
  }
  
  fetchData(page = this.state.page, sizePerPage = this.state.sizePerPage) {    const params = {page : page, sizePerPage: sizePerPage };
    const urlParams = new URLSearchParams(Object.entries(params));
    let me = this;  
    fetch("http://localhost:17080/comment-list?" + urlParams)  
    .then(  
      function(response) {  
        if (response.status !== 200) {            
          return;  
        }

        response.json().then(function(data) {  
           me.setState({items: data.items, totalSize: data.total, page, sizePerPage, isDataFetched: true}); 
        });  
      }  
    )  
    .catch(function(err) { 
      me.setState({isDataFetched: true}); 
      console.log("Fetch Error :-S", err);         
    });
  }
  
  componentDidMount() {       
    this.fetchData(); 
  }

  handlePageChange(page, sizePerPage) {  
    this.setState({
      isDataFetched:false,
    });
    this.fetchData(page, sizePerPage);    
  }

  handleSizePerPageChange(sizePerPage) {
    this.fetchData(1, sizePerPage);
  }

  renderShowsTotal(start, to, total) {
    return (
      <p>
        Liste des commentaire de { start } à { to } sur un total de { total }
      </p>
    );
  }

  setTableOption(){        
     if(this.state.isDataFetched){
           return "No data";
      }else{
           return(
               <Loadable
                  active={true}
                  spinner
                  text="Loading..."
                  background="#e7e7e7"
                  color="#5e5e5e"
                  style={{height:"350px"}}
                  >                  
                </Loadable>
           );
      }
  }

  render() {
    return (
      <div className="container">               
        <BootstrapTable    
          data={this.state.items}
          fetchInfo={{dataTotalSize: this.state.totalSize}}
          pagination
          options={this.options}
          striped          
          remote
          height="100%"
        >         
          <TableHeaderColumn
            dataField="text"
            dataAlign="center"
            dataSort
            tdStyle={{ "word-wrap": "break-word", "white-space": "normal", "vertical-align": "middle" }}
          >
            Commentaire
          </TableHeaderColumn>         
        </BootstrapTable>          
      </div>
    );
  }
}

My question is, is it possible to display the loader then the noTextData if there is no data and is it possible to display the loader between the change of pages. And how to do that. I would be grateful if you could give me a solution to this.

[crowdwave]

Set your options like this:

    let options = {
      noDataText: (this.state.isLoading) ? <TimedSpinner timeoutTimerMilliseconds={5000}/> : 'Nothing to display',
    }

And add in a timed spinner component like this:

import React from 'react'
import PropTypes from 'prop-types'
import 'font-awesome/css/font-awesome.css'


export default class TimedSpinner extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      initialTimerMilliseconds: (!!props.initialTimerMilliseconds) ? props.initialTimerMilliseconds : 2000,
      timeoutTimerMilliseconds: (!!props.timeoutTimerMilliseconds) ? props.timeoutTimerMilliseconds : 7000,
      timeoutMessage: (!!this.props.children) ? (<div>{this.props.children}</div>) : (<div>Timeout</div>),
      content: (<i className="fa fa-circle-o-notch fa-spin" style={{'fontSize': '18px'}}/>),
    }
    this.initialTimer = null
  }

 //       content: (!!this.props.children) ? this.props.children : (<div>Timeout</div>),

  componentDidMount = () => {
    this.initialTimer = setTimeout(() => {
      this.setState({
        visible: true,
        content: (<i className="fa fa-circle-o-notch fa-spin" style={{'fontSize': '18px'}}/>),
      })}, this.state.initialTimerMilliseconds)
    this.timeoutTimer = setTimeout(() => {
      this.setState({
        visible: true,
        content: this.state.timeoutMessage,
      })}, this.state.timeoutTimerMilliseconds)
  }

  componentWillUnmount() {
    clearTimeout(this.initialTimer)
    clearTimeout(this.timeoutTimer)
   }

  render() {
    console.log(this.state, this.props)
    console.log(this.state.content)
    return (!!this.state.visible) ? this.state.content : null
  }
}

[shorif2000]

@AllenFang how can i add

noDataText: 'Loading...'+<i className="fa fa-spinner fa-spin" />

the above display as Loading...[object Object]