Call History page is slow when there are many calls

[embbnux]

if there are many call, it will be slow when user click call history tab Maybe it need a pagination

[u9520107]

I suppose we can apply similar tactics as messages page.

[u9520107]

@embbnux I think we have planned a different call item implementation, consider implementing rendering only visible ones first, and render the rest later. Or some sort of simple pagination in UI layer. Also, it turns out that the number factor in this slowness is the rendering of formatted numbers. We need to experiment with more enhancements to make this page behave faster... or at least make it feel faster.

BTW, read up on react performance tools if you haven't done so. It is quite helpful in finding out the bottleneck.

[tylerlong]

The current solution(workaround) is hacky:

  componentDidMount() {
    this._mounted = true;
    setTimeout(() => {
      // clear timeout is probably not necessary
      if (this._mounted) {
        this.setState({
          loading: false,
        });
      }
    }, 10);
  }

More investigation is needed to find the root cause(for its slowness) and replace the workaround with a real solution.

[embbnux]

We can try https://github.com/seatgeek/react-infinite