From 55abff8af75b9a8ab541ec68a3603c77e1339e23 Mon Sep 17 00:00:00 2001 From: ThibG Date: Wed, 12 Dec 2018 22:32:44 +0100 Subject: [PATCH] Various fixes to scrollable lists and media gallery (#9501) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Always use the scrollable class for the ScrollList component Fixes #9499 as well as empty timelines' scrollbar “blinking” between loading state and empty state. * Do not display empty message when the list is known to have more elements Fixes #9500 * Fix LoadMore usage in account media gallery (Even though that codepath is probably never actually used…) * Make account media gallery more consistent with account timeline Fixes #9498 Display “load more” more consistently, add a loading indicator on first load. * Fix “load more” button when no data has been fetched --- .../mastodon/components/scrollable_list.js | 11 ++++------- .../mastodon/components/status_list.js | 2 +- .../features/account_gallery/index.js | 19 +++++++++++++------ .../mastodon/features/followers/index.js | 1 - .../mastodon/features/following/index.js | 1 - 5 files changed, 18 insertions(+), 16 deletions(-) diff --git a/app/javascript/mastodon/components/scrollable_list.js b/app/javascript/mastodon/components/scrollable_list.js index ab4e7d59cfe..774c8835da1 100644 --- a/app/javascript/mastodon/components/scrollable_list.js +++ b/app/javascript/mastodon/components/scrollable_list.js @@ -30,7 +30,6 @@ export default class ScrollableList extends PureComponent { hasMore: PropTypes.bool, prepend: PropTypes.node, alwaysPrepend: PropTypes.bool, - alwaysShowScrollbar: PropTypes.bool, emptyMessage: PropTypes.node, children: PropTypes.node, }; @@ -206,11 +205,11 @@ export default class ScrollableList extends PureComponent { } render () { - const { children, scrollKey, trackScroll, shouldUpdateScroll, showLoading, isLoading, hasMore, prepend, alwaysPrepend, alwaysShowScrollbar, emptyMessage, onLoadMore } = this.props; + const { children, scrollKey, trackScroll, shouldUpdateScroll, showLoading, isLoading, hasMore, prepend, alwaysPrepend, emptyMessage, onLoadMore } = this.props; const { fullscreen } = this.state; const childrenCount = React.Children.count(children); - const loadMore = (hasMore && childrenCount > 0 && onLoadMore) ? : null; + const loadMore = (hasMore && onLoadMore) ? : null; let scrollableArea = null; if (showLoading) { @@ -225,7 +224,7 @@ export default class ScrollableList extends PureComponent { ); - } else if (isLoading || childrenCount > 0 || !emptyMessage) { + } else if (isLoading || childrenCount > 0 || hasMore || !emptyMessage) { scrollableArea = (
@@ -249,10 +248,8 @@ export default class ScrollableList extends PureComponent {
); } else { - const scrollable = alwaysShowScrollbar; - scrollableArea = ( -
+
{alwaysPrepend && prepend}
diff --git a/app/javascript/mastodon/components/status_list.js b/app/javascript/mastodon/components/status_list.js index 01cc0566104..e417f9a2b96 100644 --- a/app/javascript/mastodon/components/status_list.js +++ b/app/javascript/mastodon/components/status_list.js @@ -55,7 +55,7 @@ export default class StatusList extends ImmutablePureComponent { } handleLoadOlder = debounce(() => { - this.props.onLoadMore(this.props.statusIds.last()); + this.props.onLoadMore(this.props.statusIds.size > 0 ? this.props.statusIds.last() : undefined); }, 300, { leading: true }) _selectChild (index) { diff --git a/app/javascript/mastodon/features/account_gallery/index.js b/app/javascript/mastodon/features/account_gallery/index.js index 32cb5ebdc9e..0d66868ed89 100644 --- a/app/javascript/mastodon/features/account_gallery/index.js +++ b/app/javascript/mastodon/features/account_gallery/index.js @@ -36,7 +36,7 @@ class LoadMoreMedia extends ImmutablePureComponent { return ( ); } @@ -68,7 +68,7 @@ class AccountGallery extends ImmutablePureComponent { handleScrollToBottom = () => { if (this.props.hasMore) { - this.handleLoadMore(this.props.medias.last().getIn(['status', 'id'])); + this.handleLoadMore(this.props.medias.size > 0 ? this.props.medias.last().getIn(['status', 'id']) : undefined); } } @@ -103,8 +103,8 @@ class AccountGallery extends ImmutablePureComponent { ); } - if (!isLoading && medias.size > 0 && hasMore) { - loadOlder = ; + if (hasMore) { + loadOlder = ; } return ( @@ -112,14 +112,15 @@ class AccountGallery extends ImmutablePureComponent { -
+
-
+
{medias.map((media, index) => media === null ? ( 0 ? medias.getIn(index - 1, 'id') : null} + onLoadMore={this.handleLoadMore} /> ) : ( + + {isLoading && medias.size === 0 && ( +
+ +
+ )}
diff --git a/app/javascript/mastodon/features/followers/index.js b/app/javascript/mastodon/features/followers/index.js index b9ca7f3dda2..ce56f270ca3 100644 --- a/app/javascript/mastodon/features/followers/index.js +++ b/app/javascript/mastodon/features/followers/index.js @@ -73,7 +73,6 @@ class Followers extends ImmutablePureComponent { shouldUpdateScroll={shouldUpdateScroll} prepend={} alwaysPrepend - alwaysShowScrollbar emptyMessage={emptyMessage} > {accountIds.map(id => diff --git a/app/javascript/mastodon/features/following/index.js b/app/javascript/mastodon/features/following/index.js index b3e16024001..bda0438a0a5 100644 --- a/app/javascript/mastodon/features/following/index.js +++ b/app/javascript/mastodon/features/following/index.js @@ -73,7 +73,6 @@ class Following extends ImmutablePureComponent { shouldUpdateScroll={shouldUpdateScroll} prepend={} alwaysPrepend - alwaysShowScrollbar emptyMessage={emptyMessage} > {accountIds.map(id =>