how to deal with loading in react-bootstrap-table 2

Question

I'm trying to implement the loading attribute inside the react-bootstrap-table2 before the data is fetched. however, since I'm just a new in this environment, I faced some difficulties in dealing with it.

this is the code that generates the table:

render() {
return (
  <BootstrapTable
    remote
    loading={this.props.loading}
    keyField="id"
    data={this.props.data}
    columns={this.state.stationColumns}
    pagination={paginationFactory()}
    overlay={overlayFactory({
      spinner: true,
      background: "rgba(192,192,192,0.3)"
    })}
  />
);}

as is shown above the columns is fixed and initiated in the constructor. the data and loading attribute are filled by the parent component through props one the data is retrieved.

<StationTable key="1" loading={(this.props.stationData.length >0)?false:true} data={this.props.stationData} />

after implementing this it showed an error

caught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

I've noticed if the loading attribute is false, it worked normally but if it became dynamic it showed that error.

so, how can I implement the loading attribute dynamically in a correct manner?

Thanks in advance.

Answer 1

As I have experience in using this table component, you have right but to make sure it works, please log this.props.loading in the render prototype, because I think it's undefined(A normal event in using react ^_^). Or try to define defaultProps and propTypes like this:

static defaultProps = {
  loading: true
}