How to set a loading state for react component while sorting and filtering data?

Question

I am trying to implement a table and do filtering and searching of data from the table. Since the searching and sorting takes a while I would like to implement a spinner display to show that the search/filtering is running.

Below is how I have implemented the component, I call filterData/ searchData to search through the data and return the results which is passed as props to the Grid Table component and where the data is displayed.

 {this.state.search && this.state.filter &&
                      <GridTable  
                      results= {filterData(this.state.filter,searchData(this.state.search,this.state.Data))}
                        />}
                      { this.state.search && !this.state.filter &&
                        <GridTable 
                        results = {searchData(this.state.search,this.state.Data)}
                        />}
                      { !this.state.search && this.state.filter &&
                          <GridTable 
                          results= {filterData(this.state.filter,this.state.Data)}
                          />}
                      { !this.state.search && !this.state.filter &&
                            <GridTable  
                            results = {this.state.Data}
                            />}

Where should i implement a loading state and set its state? I am confused since I am directly passing the result of the search/ filter functions into the props.

Answer 1

In your render method you can have one loader implemented like

<Loader visible={this.state.visibility}>

In your searchData method, you can set the visibility of this loader true in the first line and false in the last line like below

searchData = () => {
  // Start the loader
  this.setState({
    visibility: true,
  });

  //  ....Your logic goes here

  // Stop the loader
  this.setState({
    visibility: false,
  });
};

Answer 2

I suppose that loading state relates to the whole Grid component. It is sound wisely if you manage this state in root of your module (Table/Grid).

To pass global module state, like loading state, to children components you may use React Context API or some external state management library (Redux/Effector etc.).

After that you can easily use conditional rendering to show spinner while data is loading.

Answer 3

The Ideal way to handle this scenario is when you are triggering the search/sort function.

//Initial State:

    this.state= {
        isLoader: false
    }

filterData( some arguments){
 this.setState({ isLoader: !this.state.isLoader})

// Do your API Call or filter logic here, once you receive your response

this.setState({ isLoader: !this.state.isLoader})

}

Inside your render function, toggle your Loader based on the state changes.

 render() {
      return (
           this.state.isLoader ?(<Loading />) : <YourComponent/>
    )}