MM-13180 Call load posts earlier for infinite scroll (mattermost#2079)

* MM-13180 Call load posts earlier for infinite scroll

* Add check for max height for loading posts

* Fix issue of loading posts not getting triggered at right position
when lot of posts are loaded

  * scrollHeightAoveFoldForLoad can be really high when lot of posts are loaded
    comaparision with max value should be with scrollTop value

* Change the max-value of sctollTop to 2500 for triggering loadPosts

components/post_view/post_list.jsx

@@ -30,6 +30,10 @@ const POSTS_PER_PAGE = Constants.POST_CHUNK_SIZE / 2;
 const MAX_EXTRA_PAGES_LOADED = 10;
 const MAX_NUMBER_OF_AUTO_RETRIES = 3;
 
+const LOADPOSTS_MIN_HEIGHT = 300;
+const LOADPOSTS_MAX_HEIGHT = 2500;
+const LOADPOSTS_SCROLL_RATIO = 0.3;
+
 export default class PostList extends React.PureComponent {
  static propTypes = {
 
@@ -435,6 +439,7 @@ export default class PostList extends React.PureComponent {
  // Only count as user scroll if we've already performed our first load scroll
  this.hasScrolled = this.hasScrolledToNewMessageSeparator || this.hasScrolledToFocusedPost;
  const postList = this.postListRef.current;
+ const postListScrollTop = postList.scrollTop;
 
  this.updateFloatingTimestamp();
 
@@ -452,7 +457,16 @@ export default class PostList extends React.PureComponent {
  });
  }
 
- if (postList.scrollTop <= 0.5 * postList.clientHeight && !this.state.loadingPosts && !this.state.atEnd && this.state.autoRetryEnable) {
+ let shouldLoadPosts = false;
+ const scrollHeightAoveFoldForLoad = LOADPOSTS_SCROLL_RATIO * (postList.scrollHeight - postList.clientHeight);
+
+ if (postListScrollTop < LOADPOSTS_MIN_HEIGHT) {
+ shouldLoadPosts = true;
+ } else if ((postListScrollTop < LOADPOSTS_MAX_HEIGHT) && (postListScrollTop < scrollHeightAoveFoldForLoad)) {
+ shouldLoadPosts = true;
+ }
+
+ if (shouldLoadPosts && !this.state.loadingPosts && !this.state.atEnd && this.state.autoRetryEnable) {
  this.setState({loadingPosts: true});
  this.loadMorePosts();
  }