gitea/nas
1
0
Fork 2
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Various fixes to scrollable lists and media gallery (#9501)

Browse source 
* 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
This commit is contained in:
ThibG 2018-12-12 22:32:44 +01:00 • committed by Eugen Rochko
parent b048926e67
commit 55abff8af7
5 changed files with 18 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

19
app/javascript/mastodon/features/account_gallery/index.js
View file

@ -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>