diff options
author | ThibG <thib@sitedethib.com> | 2018-12-12 22:32:44 +0100 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2018-12-12 22:32:44 +0100 |
commit | 55abff8af75b9a8ab541ec68a3603c77e1339e23 (patch) | |
tree | 12b444cf1bf96b2f3bcbfe8d5f3738c37f9bfb85 /app/javascript/mastodon/features/account_gallery/index.js | |
parent | b048926e678e5b642cb1e939f629236e77944523 (diff) |
Various fixes to scrollable lists and media gallery (#9501)
* 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
Diffstat (limited to 'app/javascript/mastodon/features/account_gallery/index.js')
-rw-r--r-- | app/javascript/mastodon/features/account_gallery/index.js | 19 |
1 files changed, 13 insertions, 6 deletions
diff --git a/app/javascript/mastodon/features/account_gallery/index.js b/app/javascript/mastodon/features/account_gallery/index.js index 32cb5ebdc..0d66868ed 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 ( <LoadMore disabled={this.props.disabled} - onLoadMore={this.handleLoadMore} + onClick={this.handleLoadMore} /> ); } @@ -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 = <LoadMore onClick={this.handleLoadOlder} />; + if (hasMore) { + loadOlder = <LoadMore visible={!isLoading} onClick={this.handleLoadOlder} />; } return ( @@ -112,14 +112,15 @@ class AccountGallery extends ImmutablePureComponent { <ColumnBackButton /> <ScrollContainer scrollKey='account_gallery' shouldUpdateScroll={shouldUpdateScroll}> - <div className='scrollable' onScroll={this.handleScroll}> + <div className='scrollable scrollable--flex' onScroll={this.handleScroll}> <HeaderContainer accountId={this.props.params.accountId} /> - <div className='account-gallery__container'> + <div role='feed' className='account-gallery__container'> {medias.map((media, index) => media === null ? ( <LoadMoreMedia key={'more:' + medias.getIn(index + 1, 'id')} maxId={index > 0 ? medias.getIn(index - 1, 'id') : null} + onLoadMore={this.handleLoadMore} /> ) : ( <MediaItem @@ -129,6 +130,12 @@ class AccountGallery extends ImmutablePureComponent { ))} {loadOlder} </div> + + {isLoading && medias.size === 0 && ( + <div className='scrollable__append'> + <LoadingIndicator /> + </div> + )} </div> </ScrollContainer> </Column> |