Unfloyded/Legamunt
0
0
Fork 0
Code Activity

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

11
app/javascript/mastodon/components/scrollable_list.js
View file

@ -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) ? <LoadMore visible={!isLoading} onClick={this.handleLoadMore} /> : null;
const loadMore = (hasMore && onLoadMore) ? <LoadMore visible={!isLoading} onClick={this.handleLoadMore} /> : null;
let scrollableArea = null;
if (showLoading) {
@ -225,7 +224,7 @@ export default class ScrollableList extends PureComponent {
</div>
</div>
);
} else if (isLoading || childrenCount > 0 || !emptyMessage) {
} else if (isLoading || childrenCount > 0 || hasMore || !emptyMessage) {
scrollableArea = (
<div className={classNames('scrollable', { fullscreen })} ref={this.setRef} onMouseMove={this.handleMouseMove}>
<div role='feed' className='item-list'>
@ -249,10 +248,8 @@ export default class ScrollableList extends PureComponent {
</div>
);
} else {
const scrollable = alwaysShowScrollbar;
scrollableArea = (
<div className={classNames({ scrollable, fullscreen })} ref={this.setRef} style={{ flex: '1 1 auto', display: 'flex', flexDirection: 'column' }}>
<div className={classNames('scrollable scrollable--flex', { fullscreen })} ref={this.setRef}>
{alwaysPrepend && prepend}
<div className='empty-column-indicator'>