在我们等待响应时如何显示加载器，如果没有数据来显示消息“没有可用数据”？

Question

I am trying to fetch data from a url. I need to display a loader while we wait for the response and I need to display a message "No data available" when an empty array comes as response.

fetch(url).then(res => res.json())
          .then(result => {
                     if(!result.error){this.state.dataStore.resultArr = result}
           })

In the above code, I am assigning the result to a variable resultArr in the MobX Store with name dataStore.

<>
  {
  resultArr && resultArr.length>0 ? 
  ( resultArr.map(ele => ( <div>{ele.Username}<div>))) : (<Loader />)
  }
</>

Here till the response comes, I displayed a loader, but this is not covering the case when the data is an empty array. I tried various possibilities by taking an extra variable to check if the data is an empty array, but they are failing in some case. What should I do to display a loader till the response comes and if it is empty a message should be displayed and loader should be turned Off.

Answer 1

You need a new variable to record the loading status.

this.setState({ fetching: true });
fetch(url).then(res => res.json())
          .then(result => {
                     if(!result.error){this.state.dataStore.resultArr = result}
           })
           .finally(() => {
              this.setState({ fetching: false });
           })

render() {
  if (fetching) return <Loader />;
  return (
    <>
      {
      resultArr && resultArr.length>0 ? 
      ( resultArr.map(ele => ( <div>{ele.Username}<div>))) : (<Empty />)
      }
    </>
  );
}