Skip to content
This repository has been archived by the owner on Mar 13, 2024. It is now read-only.

Commit

Permalink
MM-13180 Call load posts earlier for infinite scroll (#2079)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
sudheerDev committed Dec 24, 2018
1 parent 5bc8827 commit 9723e31
Showing 1 changed file with 15 additions and 1 deletion.
16 changes: 15 additions & 1 deletion components/post_view/post_list.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {

Expand Down Expand Up @@ -441,6 +445,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;

if (postList.scrollHeight === this.previousScrollHeight) {
this.atBottom = this.checkBottom();
Expand All @@ -462,7 +467,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();
}
Expand Down

0 comments on commit 9723e31

Please sign in to comment.