me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[Glitch] Make account media gallery more consistent with account timeline

Browse source 
Display “load more” more consistently, add a loading indicator on first load.
This commit is contained in:
Thibaut Girka 2018-12-12 18:06:00 +01:00 committed by ThibG
parent dda787761b
commit 4b2c0e4e73
1 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/javascript/flavours/glitch/features/account_gallery/index.js
View file

@ -107,8 +107,8 @@ export default class AccountGallery extends ImmutablePureComponent {
); );
} }
if (!isLoading && medias.size > 0 && hasMore) { if (hasMore) {
loadOlder = <LoadMore onClick={this.handleLoadOlder} />; loadOlder = <LoadMore visible={!isLoading} onClick={this.handleLoadOlder} />;
} }
return ( return (
@ -116,10 +116,10 @@ export default class AccountGallery extends ImmutablePureComponent {
<ColumnBackButton /> <ColumnBackButton />
<ScrollContainer scrollKey='account_gallery' shouldUpdateScroll={this.shouldUpdateScroll}> <ScrollContainer scrollKey='account_gallery' shouldUpdateScroll={this.shouldUpdateScroll}>
<div className='scrollable' onScroll={this.handleScroll}> <div className='scrollable scrollable--flex' onScroll={this.handleScroll}>
<HeaderContainer accountId={this.props.params.accountId} /> <HeaderContainer accountId={this.props.params.accountId} />
<div className='account-gallery__container'> <div role='feed' className='account-gallery__container'>
{medias.map((media, index) => media === null ? ( {medias.map((media, index) => media === null ? (
<LoadMoreMedia <LoadMoreMedia
key={'more:' + medias.getIn(index + 1, 'id')} key={'more:' + medias.getIn(index + 1, 'id')}
@ -134,6 +134,12 @@ export default class AccountGallery extends ImmutablePureComponent {
))} ))}
{loadOlder} {loadOlder}
</div> </div>
{isLoading && medias.size === 0 && (
<div className='scrollable__append'>
<LoadingIndicator />
</div>
)}
</div> </div>
</ScrollContainer> </ScrollContainer>
</Column> </Column>