Frontend-UI DataTable pagination issue

Support
#1

I am an React neophyte. I’ve been working on using the @cuba-platform/react-ui DataTable and I’ve been running into strange issues with pagination and sorting. I’ve narrowed it down to the method used to load the underlying table. The pagination and sorting doesn’t keep its state if I place the data loader in an @action using a promise, like this:

@injectMainStore
@observer
class CountriesListComponent extends React.Component<MainStoreInjected & WrappedComponentProps> {

  dataCollection: DataCollectionStore<Countries>;

  @observable performingLookup: boolean = false;
  @action
  doLoadCountries() {
    this.performingLookup = true;
    this.dataCollection = collection<Countries>(Countries.NAME, {
      view: "_local",
      stringIdName: "countrycode2",
      loadImmediately: false
    });

    this.dataCollection.load()
      .then(
        action( () => {
          this.performingLookup = false;
        })
      )
      .catch(
        action( () => {
          this.performingLookup = false;
          message.error(this.props.intl.formatMessage( {id : "management.editor.error"}))
        })
      )
  }

 render() {
    if (this.props.mainStore?.isEntityDataLoaded() !== true) return <Spinner />;

    if (this.dataCollection == null && !this.performingLookup) {
      this.doLoadCountries();
      return <Spinner/>;
    }

    if (this.dataCollection.status === "LOADING")
      return <Spinner />;

    return (
      <DataTable
        dataCollection={this.dataCollection}
        columnDefinitions={[
          { field: "country", columnProps: { title:"Country"}},
          { field: "countrycode2", columnProps: {title: "ISO 2 Char Country Code"}},
          { field: "countrycode3", columnProps: {title: "ISO 3 Char Country Code"}}
        ]}
        onRowSelectionChange={this.handleRowSelectionChange}
        hideSelectionColumn={true}
        buttons={buttons}
      />
    );
  }

[Note: I’ve removed the button/handler definitions for brevity]

This defers the datacollection load into the render() function. HOWEVER, if I just load the collection in the class, IT WORKS FINE! :-/ All pagination and sorting buttons work. State is preserved. I can’t figure out why the loading process has anything to do with the displaying process. This works:

@injectMainStore
@observer
class CountriesListComponent extends React.Component<MainStoreInjected & WrappedComponentProps> {

  dataCollection2 = collection<Countries>(Countries.NAME, {
     view: "_local",
     stringIdName: "countrycode2"
  });

  render() {
    if (this.props.mainStore?.isEntityDataLoaded() !== true) return <Spinner />;

    return (
      <DataTable
        dataCollection={this.dataCollection2}
        columnDefinitions={[
          { field: "country", columnProps: { title:"Country"}},
          { field: "countrycode2", columnProps: {title: "ISO 2 Char Country Code"}},
          { field: "countrycode3", columnProps: {title: "ISO 3 Char Country Code"}}
        ]}
        onRowSelectionChange={this.handleRowSelectionChange}
        hideSelectionColumn={true}
        buttons={buttons}
      />
    );
  }

Why does the @action version fail to keep pagination/sorting state?

#2

Strangely, if I remove the , it works fine! Change the code from this:

   if (this.dataCollection == null && !this.performingLookup) {
      this.doLoadCountries();
      return <Spinner/>;
    }

to this:

   if (this.dataCollection == null && !this.performingLookup) {
        this.doLoadCountries();
      return null;
    }

Can anybody explain to me why a Spinner that should not even be rendered any more will mess up the pagination/sort state in the DataTable?