Must InfiniteLoader's loadMoreRows use promises?

The InfiniteLoader List example says to add at least 1 to the rowCount if there’s more to load. This is needed for it to trigger the loading. Unfortunately, it also causes the list to attempt to render a row even though the data is not there. Then, once the data shows up, that row does not get re-rendered until much later, when you stop scrolling with that row in view. This leaves a noticeable gap in your list.

Here’s my repro case. Keep scrolling steadily without stopping and you’ll notice that the numbers 20 and 21 do not show up unless you let your scrolling hit a dead stop. Ditto for 40 and 41. This is because I’m loading items in chunks of 20 and adding 2 rows of buffer.

I tried a bunch of workarounds for this:

• I tried making isRowLoaded return true or false for this row, but it made no difference.
• I tried simply not returning a value from renderRow, but that caused my scroll position to jump back to the top of the document when I reached it.
• I tried passing a rowCount that includes the extra row to the <InfiniteLoader> and a rowCount that does not include the extra row to the <List>. This worked! It seems wrong though. Is this really OK to do?

To be more clear, my work-around looks something like this:

<InfiniteLoader rowCount={loadedItems + 1} ...>
  ...
  <List rowCount={loadedItems} .../>
  ...
</Infiniteloader>

[gausie]

If anyone uses redux-saga or some other more complicated redux side-effects management, I had great success using https://github.com/erikras/redux-promise-listener to turn my dispatched actions into a Promise that InfiniteScroller can use.

[nickretallack]

Oh. There’s a comment about this in the code already. I guess I have to return a promise from loadMoreRows to make this work correctly? I guess that makes sense, and that’s how it’s explained in the documentation now that I take a closer look at it.

However, my app wasn’t written with promises. It uses Redux. My loadMoreRows function is a dispatched Thunk. Data comes back in through props. Is there a way to make this feature work without promises?