Material-table: endless loading/spinning when using function for data (remote data)

[hbinkle]

the table rerenders/spinns endless when using a fuction for data instaed of a preloaded object.

• Not matter if I call resolve or reject.

https://codesandbox.io/s/material-demo-yvqym?fontsize=14&hidenavigation=1&theme=dark

[SvenNussgruber]

In your sandbox the query string is the URL to your sandbox. Did you mean to query an API endpoint instead?

[hbinkle]

In your sandbox the query string is the URL to your sandbox. Did you mean to query an API endpoint instead?

Right, it should be an API endpoint when the code is really used. But in the demo case it does't matter because the response is not used. I could also have used "http://www.google.com". It simply needs to be a successfull fetch to demonstrate.

[cinnabarcaracal]

We're getting this same issue in our project. The table is given a function that returns a promise, and it can fetch data normally just fine. But if the promise fails, the table isLoading state stays as true.

I can tell the promise is failing because it will execute a .catch if I put one in there

[cinnabarcaracal]

I think the problem is in the onQueryChange function in material-table.js.

Potential solution:

onQueryChange = (query, callback) => {
  query = { ...this.state.query, ...query };

  this.setState({ isLoading: true }, () => {
    this.props
      .data(query)
      .then(result => {
        query.totalCount = result.totalCount;
        query.page = result.page;
        this.dataManager.setData(result.data);
        this.setState(
          {
            isLoading: false,
            ...this.dataManager.getRenderState(),
            query,
          },
          () => {
            callback && callback();
          },
        );
      })
      .catch(reason => {
        this.setState({ isLoading: false });
      });
  });
};

[restaadiputra]

Is there any news about this? I am having the same issue and as for my current solution is accessing the table ref in my .catch and call the setState manually to stop the loading animation,

.catch(error => { tableRef.current.setState({ isLoading: false }); console.log('ERROR ', error); });

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[cinnabarcaracal]

Please don't close this issue

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.