ag-grid continues to show the loading icon when no data returned from the server

Question

I'm facing a strange behavior in Ag-grid (Angular). When I use the serverSide option and when there is no data returned from the server, the grid is showing the loading icon for all the rows mentioned in the cacheBlockSize. I've tried as many options I could to hide these empty loading rows, but nothing has worked out.

I've tried to replicate the same in the official example page. Luckily I could replicate the similar behavior. Refer to this edited version of an official example page, where I'm passing an empty array from the fake server call:

https://plnkr.co/edit/Egw9ToJmNE7Hl6Z6

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .subscribe((data) => {
        let idSequence = 0;
        data.forEach((item) => {
          item.id = idSequence++;
        });
        const server = new FakeServer(data);
        const datasource = new ServerSideDatasource(server);
        params.api.setServerSideDatasource(datasource);
      });
  }
}

function ServerSideDatasource(server) {
  return {
    getRows: (params) => {
      setTimeout(() => {
        const response = server.getResponse(params.request);
        if (response.success) {
          params.successCallback(response.rows, response.lastRow);
        } else {
          params.failCallback();
        }
      }, 2000);
    },
  };
}
function FakeServer(allData) {
  return {
    getResponse: (request) => {
      console.log(
        'asking for rows: ' + request.startRow + ' to ' + request.endRow
      );
      const rowsThisPage = allData.slice(request.startRow, request.endRow);
      const lastRow = allData.length <= request.endRow ? data.length : -1;
      return {
        success: true,
        rows: [],
        lastRow: lastRow,
      };
    },
  };
}

The screenshot of the plunker output is given below.

Answer 1

Just figured out that its a problem with lastRow value. If the rows are empty but lastRow is not -1, then its trying to load the data and showing the loading icon for all the rows as per the cacheBlockSize.

Fixed code below:

function FakeServer(allData) {
  return {
    getResponse: (request) => {
      console.log(
        'asking for rows: ' + request.startRow + ' to ' + request.endRow
      );
      let data = []; //allData;
      const rowsThisPage = data.slice(request.startRow, request.endRow);
      const lastRow = data.length <= request.endRow ? data.length : -1;
      return {
        success: true,
        rows: rowsThisPage,
        lastRow: lastRow,
      };
    },
  };
}