kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Adds loading indicator to timelines and notifactions when loading more, fixes #326
rodzic
fb16afb8f7
commit
68ee30f9f2
|
@ -8,6 +8,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
import LoadGap from './load_gap';
|
import LoadGap from './load_gap';
|
||||||
import ScrollableList from './scrollable_list';
|
import ScrollableList from './scrollable_list';
|
||||||
import TimelineQueueButtonHeader from './timeline_queue_button_header';
|
import TimelineQueueButtonHeader from './timeline_queue_button_header';
|
||||||
|
import LoadingIndicator from './loading_indicator';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
queue: { id: 'status_list.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {post} other {posts}}' },
|
queue: { id: 'status_list.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {post} other {posts}}' },
|
||||||
|
@ -148,9 +149,13 @@ export default class StatusList extends ImmutablePureComponent {
|
||||||
count={totalQueuedItemsCount}
|
count={totalQueuedItemsCount}
|
||||||
message={messages.queue}
|
message={messages.queue}
|
||||||
/>,
|
/>,
|
||||||
<ScrollableList key='scrollable-list' {...other} isLoading={isLoading} showLoading={isLoading && statusIds.size === 0} onLoadMore={onLoadMore && this.handleLoadOlder} ref={this.setRef}>
|
<ScrollableList key='scrollable-list' {...other} isLoading={isLoading} onLoadMore={onLoadMore && this.handleLoadOlder} ref={this.setRef}>
|
||||||
{scrollableContent}
|
{scrollableContent}
|
||||||
</ScrollableList>,
|
</ScrollableList>,
|
||||||
|
isLoading &&
|
||||||
|
<div className='slist__append'>
|
||||||
|
<LoadingIndicator />
|
||||||
|
</div>,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -20,6 +20,7 @@ import ScrollableList from '../../components/scrollable_list';
|
||||||
import LoadGap from '../../components/load_gap';
|
import LoadGap from '../../components/load_gap';
|
||||||
import TimelineQueueButtonHeader from '../../components/timeline_queue_button_header';
|
import TimelineQueueButtonHeader from '../../components/timeline_queue_button_header';
|
||||||
import { getSettings } from 'soapbox/actions/settings';
|
import { getSettings } from 'soapbox/actions/settings';
|
||||||
|
import LoadingIndicator from '../../components/loading_indicator';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
title: { id: 'column.notifications', defaultMessage: 'Notifications' },
|
title: { id: 'column.notifications', defaultMessage: 'Notifications' },
|
||||||
|
@ -163,18 +164,25 @@ class Notifications extends React.PureComponent {
|
||||||
this.scrollableContent = scrollableContent;
|
this.scrollableContent = scrollableContent;
|
||||||
|
|
||||||
const scrollContainer = (
|
const scrollContainer = (
|
||||||
<ScrollableList
|
<div>
|
||||||
scrollKey='notifications'
|
<ScrollableList
|
||||||
isLoading={isLoading}
|
scrollKey='notifications'
|
||||||
showLoading={isLoading && notifications.size === 0}
|
isLoading={isLoading}
|
||||||
hasMore={hasMore}
|
// showLoading={isLoading && notifications.size === 0}
|
||||||
emptyMessage={emptyMessage}
|
hasMore={hasMore}
|
||||||
onLoadMore={this.handleLoadOlder}
|
emptyMessage={emptyMessage}
|
||||||
onScrollToTop={this.handleScrollToTop}
|
onLoadMore={this.handleLoadOlder}
|
||||||
onScroll={this.handleScroll}
|
onScrollToTop={this.handleScrollToTop}
|
||||||
>
|
onScroll={this.handleScroll}
|
||||||
{scrollableContent}
|
>
|
||||||
</ScrollableList>
|
{scrollableContent}
|
||||||
|
</ScrollableList>
|
||||||
|
{isLoading &&
|
||||||
|
<div className='slist__append'>
|
||||||
|
<LoadingIndicator />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
Ładowanie…
Reference in New Issue