How to solve data loading issue in React redux

Question

I am trying to figure out how can i manage/display this component when data is still loading.

I am using react redux for this case.

any suggestion for solving th

Answer 1

One of the common ways to deal with presentation of the component, especially if it is a container, is to implement loading activity indicator, which would disappear once you have the data to display. Just make sure to implement loading boolean in your local state, and once you confirm that data is there, change loading to false.

async componentWillMount() {
  await getWorkexperience();
  this.setState({
     loading: false,
  });
}

...

render() {
  const { data, loading } = this.state;

  return (
    

      {/*
        Check the status of the 'loading' variable. If true, then display
        the loading spinner. Otherwise, display the data.
      */}
      {loading ?  : }
    
  );

}

Is this something you were looking for?

Among ready made solutions there are packages that can be used right away:

• https://www.npmjs.com/package/react-activity
• https://www.npmjs.com/package/react-activity-indicator