Custom Loader does not get applied with respect to react-table

Question

I am trying to over ride the default loader provided by react-table with the Spinner provided by the semantic-ui-react . But this does not seem like working. I have maintained three components; one is the App, one for Data Grid and the other for the Spinner. Can someone help me here?

Sandbox: https://codesandbox.io/s/react-table-row-table-g3kd5

App Component

import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      columns: [],
      loading: true
    };
  }

  componentDidMount() {
    this.getData();
    this.getColumns();
  }

  getData = () => {
    let data = [
      { firstName: "Jack", status: "Submitted" },
      { firstName: "Simon", status: "Pending" },
      { firstName: "Pete", status: "Approved" }
    ];
    setTimeout(() => {
      this.setState({ data, loading: false });
    }, 2000);
  };

  getColumns = () => {
    let columns = [
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Status",
        accessor: "status"
      }
    ];
    this.setState({ columns });
  };

  render() {
    return (
      <>
        <DataGrid
          loading={this.state.loading}
          data={this.state.data}
          columns={this.state.columns}
        />
      </>
    );
  }
}

DataGrid

import * as React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";
import Spinner from "./Spinner";


export default class DataGrid extends React.Component {
  render() {
    return (
      <>
        <ReactTable
          loading={this.props.loading}
          data={this.props.data}
          LoadingComponent={Spinner}
          columns={this.props.columns}
        />
      </>
    );
  }
}

Spinner

import { Loader } from "semantic-ui-react";
import * as React from "react";

const Spinner: React.FunctionComponent = props => {
  return (
    <div>
      <Loader active={props.spinnerFlag}>Loading</Loader>
    </div>
  );
};

export default Spinner;

Answer 1

Okay you are missing something.

First thing is if you check your sandbox it does show loading at the end but there is an issue. You need to do two things

1- Give your Spinner proper style so it will appear on your Table not below it.

2- You need to utilize loading prop that you are passing to ReactTable Component. Because for now your Spinner is always visible its not controlled by loading prop

Your spinner Component should use props.loading instead of props.spinnerFlag because that's what being passed to ReactTable component

Change your Spinner file as this

const Spinner: React.FunctionComponent<IProps> = props => {
return props.loading ? (
<div
  style={{
    display: "block",
    position: "absolute",
    left: 0,
    right: 0,
    background: "rgba(255,255,255,0.8)",
    transition: "all .3s ease",
    top: 0,
    bottom: 0,
    textAlign: "center"
  }}
>
  <Loader>Loading</Loader>
</div>
) : null;
};

export default Spinner;

Now you should be able to see your loader. Here's Sandbox

Hope this helps