InfiniteLoader with FlexTable doesn't work correctly

I tried the demo with the InfiniteLoader using a VirtualScroll and it posed no problems. But when I exchanged the VirtualScroll with the FlexTable it results in an unexpected behaviour. It seems to start loading the items but doesn’t rerender the items until I scroll again. This gif shows the issue: When you initialize the list, it’ll say loading forever. No matter how long you wait. But as soon as you start scrolling, the loaded date will be rendered) vs expected behavior (using VirtualScroll): Code using FlexTable:

import * as React from 'react'
import {AutoSizer, InfiniteLoader, FlexColumn, FlexTable} from 'react-virtualized'

interface Props {
  model: any
}

export default class InifiniteTable extends React.Component<Props, {}> {
  list = [
      { name: 'Brian Vaughn', description: 'Software engineer', loaded: false },
      { name: 'John Doe', description: 'PM', loaded: false },
  ];

  constructor() {
    super()
    for (let i = 0; i < 3000000; i++) {
      this.list.push({ name: 'John Doe', description: 'PM', loaded: false })
    }
  }

  loadMoreRows = ({startIndex, stopIndex}) => {
    console.log(`loading more rows ${startIndex} - ${stopIndex}`)
    return new Promise(
      (resolve) =>
          setTimeout(() => {
            for (let i = startIndex; i < stopIndex; i++) {
              this.list[i].loaded = true
            }
            resolve(this.list.slice(startIndex, stopIndex))
          }, 1000)
    )
  }

  render() {
    let width = 408 / this.props.model.fields.edges.length
    return (
      <div style={{height: '100%'}}>
        <InfiniteLoader
          rowCount={this.list.length}
          isRowLoaded={({index}) => this.list[index].loaded}
          loadMoreRows={this.loadMoreRows}
        >
          {({onRowsRendered, registerChild}) => (
          <AutoSizer>
            {({width, height}) => (
            <FlexTable
              ref={registerChild}
              width={width}
              height={height}
              onRowsRendered={onRowsRendered}
              headerHeight={30}
              rowHeight={30}
              rowCount={this.list.length}
              rowGetter={({index}) => this.list[index].loaded ? this.list[index] : ({name: 'loading', description: 'loading'})}
            >
              <FlexColumn label='Name' dataKey='name' width={width / 2} />
              <FlexColumn label='Description' dataKey='description' width={width / 2} />
            </FlexTable>
            )}
          </AutoSizer>
          )}
        </InfiniteLoader>
      </div>
    )
  }
}

[bvaughn]

Check out release 7.22.1 ~ should be fixed for you 😄

Thanks for the nice bug report.

[bvaughn]

In either way, the fix is easy (despite being a bit hackish). I’ll add some tests and inline comments explaining the reasoning…then I should be able to deploy. If not before lunch, then sometime this afternoon. I’ll ping this issue again once the fix is live.