How to get a callback when table has finished loading?

[johnthagen]

We are using @material-table/core and when we change the page size to hundreds of entries, the table takes a long time (10s of seconds) to load due to the complex contents we put inside of it. This is acceptable to wait for, but we are trying to set isLoading during this process so that the user is clearly notified of what is happening rather than the page freezing.

We are trying to do something similar to:

  const [isLoading, setIsLoading] = useState<boolean>(false);

  return (
        <MaterialTable<any>
          ...
          onRowsPerPageChange={(pageSize: number): void => {
            setIsLoading(true);
          }}
          isLoading={isLoading}
        />
  );

This works to set the loading when the user changes the page size, but I couldn't find any props to get a handle for a callback that could set isLoading back to false once the MaterialTable completed it's loading.

How would one go about this? Would this require MaterialTable adding a new prop?

[Domino987]

This is a React and not a sole Mt problem because it's the plain Rendering not any logic that blocks. React itself has no way that I am aware of to notify that a render went through. One way would be use timeouts to trigger it maybe or a use effect. If you have a sandbox way to achieve something with plain diva, e.g. swap from 100 divs to 1000000 and get a notification, o would check it out and see if we can apply something like this.

[jasonleenaylor]

@Domino987 what about the useEffect callback?
Could MT take a callback and then add a useEffect which calls the callback?

[Domino987]

Yes a useEffect might work. But this could also be on the level of the parent component that would achieve the same effect or am I missing something?

@jasonleenaylor

[imnasnainaec]

There is an issue with setting isLoading to true with onRowsPerPageChange: the table's doesn't render as loading until after the page-change is complete, when the loading screen is no longer needed.

I have tried a modification of @material-table/core that updates the internal isLoading state, and changes the rows-per-page in the setState's callback: https://github.com/imnasnainaec/core/blob/dist/src/material-table.js#L513-L536

Modified code used via"@material-table/core": "imnasnainaec/core#dist", in package.json.

(This is already what material-table for saving row edits; see the onEditingApproved function.)

That still doesn't work, and I don't understand why. Here's an example of browser-recorded performance data using the modified code:

The click in the rows-per-page menu is registered at about 1515 ms, and I suspect most of the rendering for isLoading: true is wrapped up at the 1656 ms spike (zoomed into below). However, the click event continues for another 5.5 seconds as the callback update is processed, so even though the state was updated to be loading, the user still sees the rows-per-page menu stuck open and does not see the loading screen.

[Domino987]

But now I understand what you mean with the is loading.
Once you show your implementation, I'll take a look.

[imnasnainaec]

For now, here's the first 45 ms of the flame graph for the above sandbox:

Whereas here's the first 45 ms of the flame graph for the same situation (clicking from 5 to 10,000 rows), but with "@material-table/core": "6.1.15", (https://codesandbox.io/s/ecstatic-water-4pycsh)

The puzzle for me remains: how to get React to show in the DOM the complete render with isLoading: true before running the setState callback function.

[Domino987]

@imnasnainaec
Currently, there is no loading displayed because this never posed a problem since so many DOM nodes are not recommended anyway.

The callback is supposed to be called after the fact, so setting loading to true during the callback will be too late.

I would refrain from enabling it for everybody to show a loading indicator every time they change page size since it has not been a problem so far, and it would be a dramatic change for everybody.

How would you propose to set this without changing the current UX?

[imnasnainaec]

Could add prop beforePageChange?: (page: number, pageSize: number) => void | Promise<void>; to types/index.d.ts (implemented here: https://github.com/imnasnainaec/core/blob/before-page-change/src/material-table.js#L487-L536), but that hits the same dead-end as above.

[Domino987]

Well that's not the problem. I was thinking more like onRenderStateChange maybe to make it more versitale.

The problem is more how this should be handled in the most user friendly way without disrupting other stuff:

onRowsPerPageChange = (event) => {
    const pageSize = event.target.value;
    this.setState({ isLoading: true }, () => {
      setTimeout(() => {
        this.dataManager.changePageSize(pageSize);
        const callback = () => {
          this.props.onPageChange && this.props.onPageChange(0, pageSize);
          this.props.onRowsPerPageChange &&
            this.props.onRowsPerPageChange(pageSize);
          this.setState({ isLoading: false });
        };

        if (this.isRemoteData()) {
          const query = { ...this.state.query };
          query.pageSize = event.target.value;
          query.page = 0;
          this.onQueryChange(query, callback);
        } else {
          this.dataManager.changeCurrentPage(0);
          this.setState(this.dataManager.getRenderState(), callback);
        }
      }, 10);
    });
  };