Class App

website/src/examples/infinite-loading.js:85–187

`

export default class App extends React.Component {
  state = {
    data: [],
    loading: true,
    loadingMore: false,
    loadedAll: false,
  }

  fetchData(offset = 0, limit = PAGE_SIZE) {
    return delay(3000).then(() => {
      return DATA.slice(offset, offset + limit)
    })
  }

  loadData() {
    this.fetchData(0, Math.random() < 0.2 ? 0 : PAGE_SIZE).then(data => {
      if (!this._isMount) return
      this.setState({
        data,
        loading: false,
        loadedAll: data.length < PAGE_SIZE,
      })
    })
  }

  loadMore() {
    this.setState({ loadingMore: true })
    this.fetchData(this.state.data.length).then(data => {
      if (!this._isMount) return
      this.setState({
        data: [...this.state.data, ...data],
        loadingMore: false,
        loadedAll: data.length < PAGE_SIZE,
      })
    })
  }

  handleEndReached = args => {
    action('onEndReached')(args)
    const { loading, loadingMore, loadedAll } = this.state
    if (loading || loadingMore || loadedAll) return
    this.loadMore()
  }

  handleReload = () => {
    this.setState({
      data: [],
      loading: true,
    })
    this.loadData()
  }

  renderEmpty = () => {
    if (this.state.loading) return null
    return <Empty>No data available</Empty>
  }

  renderOverlay = () => {