Adds loading indicator to timelines and notifactions when loading more, fixes #326

app/soapbox/components/status_list.js

@@ -8,6 +8,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import LoadGap from './load_gap';
 import ScrollableList from './scrollable_list';
 import TimelineQueueButtonHeader from './timeline_queue_button_header';
+import LoadingIndicator from './loading_indicator';
 
 const messages = defineMessages({
   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}
         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}
       </ScrollableList>,
+      isLoading &&
+        <div className='slist__append'>
+          <LoadingIndicator />
+        </div>,
     ];
   }
 

app/soapbox/features/notifications/index.js

@@ -20,6 +20,7 @@ import ScrollableList from '../../components/scrollable_list';
 import LoadGap from '../../components/load_gap';
 import TimelineQueueButtonHeader from  '../../components/timeline_queue_button_header';
 import { getSettings } from 'soapbox/actions/settings';
+import LoadingIndicator from '../../components/loading_indicator';
 
 const messages = defineMessages({
   title: { id: 'column.notifications', defaultMessage: 'Notifications' },
@@ -163,18 +164,25 @@ class Notifications extends React.PureComponent {
     this.scrollableContent = scrollableContent;
 
     const scrollContainer = (
-      <ScrollableList
-        scrollKey='notifications'
-        isLoading={isLoading}
-        showLoading={isLoading && notifications.size === 0}
-        hasMore={hasMore}
-        emptyMessage={emptyMessage}
-        onLoadMore={this.handleLoadOlder}
-        onScrollToTop={this.handleScrollToTop}
-        onScroll={this.handleScroll}
-      >
-        {scrollableContent}
-      </ScrollableList>
+      <div>
+        <ScrollableList
+          scrollKey='notifications'
+          isLoading={isLoading}
+          // showLoading={isLoading && notifications.size === 0}
+          hasMore={hasMore}
+          emptyMessage={emptyMessage}
+          onLoadMore={this.handleLoadOlder}
+          onScrollToTop={this.handleScrollToTop}
+          onScroll={this.handleScroll}
+        >
+          {scrollableContent}
+        </ScrollableList>
+        {isLoading &&
+          <div className='slist__append'>
+            <LoadingIndicator />
+          </div>
+        }
+      </div>
     );
 
     return (