Fix load more feature on the Account media gallery (#3293)

* Add load more button for large screens
* Fix `next` state value on the first loading
* Don't load if `isLoading || !hasMore`
* Start load on near the bottom

1 files changed, 23 insertions, 3 deletions

diff --git a/app/javascript/mastodon/features/account_gallery/index.js b/app/javascript/mastodon/features/account_gallery/index.js
index 6ddfcb0a0..a15419ac7 100644
--- a/app/javascript/mastodon/features/account_gallery/index.js
+++ b/app/javascript/mastodon/features/account_gallery/index.js
@@ -17,6 +17,7 @@ import MediaItem from './components/media_item';
 import HeaderContainer from '../account_timeline/containers/header_container';
 import { FormattedMessage } from 'react-intl';
 import { ScrollContainer } from 'react-router-scroll';
+import LoadMore from '../../components/load_more';
 
 const mapStateToProps = (state, props) => ({
   medias: getAccountGallery(state, Number(props.params.accountId)),
@@ -48,16 +49,30 @@ class AccountGallery extends ImmutablePureComponent {
     }
   }
 
+  handleScrollToBottom = () => {
+    if (this.props.hasMore) {
+      this.props.dispatch(expandAccountMediaTimeline(Number(this.props.params.accountId)));
+    }
+  }
+
   handleScroll = (e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.target;
+    const offset = scrollHeight - scrollTop - clientHeight;
 
-    if (scrollTop === scrollHeight - clientHeight) {
-      this.props.dispatch(expandAccountMediaTimeline(Number(this.props.params.accountId)));
+    if (150 > offset && !this.props.isLoading) {
+      this.handleScrollToBottom();
     }
   }
 
+  handleLoadMore = (e) => {
+    e.preventDefault();
+    this.handleScrollToBottom();
+  }
+
   render () {
-    const { medias, autoPlayGif, isLoading } = this.props;
+    const { medias, autoPlayGif, isLoading, hasMore } = this.props;
+
+    let loadMore = null;
 
     if (!medias && isLoading) {
       return (
@@ -67,6 +82,10 @@ class AccountGallery extends ImmutablePureComponent {
       );
     }
 
+    if (!isLoading && medias.size > 0 && hasMore) {
+      loadMore = <LoadMore onClick={this.handleLoadMore} />;
+    }
+
     return (
       <Column>
         <ColumnBackButton />
@@ -87,6 +106,7 @@ class AccountGallery extends ImmutablePureComponent {
                   autoPlayGif={autoPlayGif}
                 />
               )}
+              {loadMore}
             </div>
           </div>
         </ScrollContainer>