CellTable height shrinks upon paging

Question

IMPORTANT :: This issue in entirely different to another similarly titled issue on Stack Overflow.

I have a CellTable working beautifully in conjunction with an RPC-backed AsyncDataProvider in GWT 2.5.1. The RPC is extremely fast to respond, coming in at less than 20 milliseconds response time.

The problem I'm having is that as I page through the table, I seem to have a flicker that occurs on the table within the browser. After some debugging, I can see that the table displays no data rows, then within a few milliseconds it restores the rows of the next page.

This manifests itself as the following quick sequences of UI events every time I move page (where 10 is an arbitrary page size):

1. Showing current page (10 records)
2. Showing empty page (0 records)
3. Showing next page (10 records)

To help isolate if the problem was with the event handler from the associated pager widget, I added a button (purely for test purposes) to manually change page in the table. The following button has the exact same symptoms as paging with a click on the pager widget.

    _movePageForwardButton.addClickHandler(new ClickHandler() {
       @Override
       public void onClick(ClickEvent event) {
           _table.setPageStart(_table.getPageStart()+10);
       }
    });

I already performed a Google search, and found this post (from which I borrowed the title of this question), which describes the exact same symptoms as I am currently experiencing. No solution is offered, and I must assume that others have experienced the same issue and worked out their own workarounds. A workaround would be most graciously received.

Answer 1

I had the same problem. The solution was to set the rowData immediately (to some temporary values), before your async processing starts, so in the meantime your CellList has something it can display:

dataProvider = new AsyncDataProvider<StringEntity>() {

  @Override
  protected void onRangeChanged(final HasData<StringEntity> display) {
    final Range visibleRange = display.getVisibleRange();
    final int start = visibleRange.getStart();
    final int length = visibleRange.getLength();

    final List<StringEntity> subList = new ArrayList<StringEntity>();
    for (long position = start; position < start + length; position ++)
      subList.add(new StringEntity(position, "Please wait..."));

    display.setRowData(start, subList);

    // now perform your request...
    // onSuccess, set the rowData again (to the updated values)
  }
}