Notifications: use a ScrollableList again

app/soapbox/features/notifications/index.js

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { List as ImmutableList } from 'immutable';
 import { debounce } from 'lodash';
 import PropTypes from 'prop-types';
@@ -5,11 +6,9 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
-import { Virtuoso } from 'react-virtuoso';
 import { createSelector } from 'reselect';
 
 import { getSettings } from 'soapbox/actions/settings';
-import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder_notification';
 
 import {
@@ -17,8 +16,9 @@ import {
   scrollTopNotifications,
   dequeueNotifications,
 } from '../../actions/notifications';
+import ScrollableList from '../../components/scrollable_list';
 import TimelineQueueButtonHeader from  '../../components/timeline_queue_button_header';
-import { Column, Text } from '../../components/ui';
+import { Column } from '../../components/ui';
 
 import FilterBarContainer from './containers/filter_bar_container';
 import NotificationContainer from './containers/notification_container';
@@ -28,16 +28,6 @@ const messages = defineMessages({
   queue: { id: 'notifications.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {notification} other {notifications}}' },
 });
 
-const Footer = ({ context }) => (
-  context.hasMore ? (
-    <PlaceholderNotification />
-  ) : null
-);
-
-const Item = ({ context, ...rest }) => (
-  <div className='border-solid border-b border-gray-200 dark:border-slate-700' {...rest} />
-);
-
 const getNotifications = createSelector([
   state => getSettings(state).getIn(['notifications', 'quickFilter', 'show']),
   state => getSettings(state).getIn(['notifications', 'quickFilter', 'active']),
@@ -157,44 +147,49 @@ class Notifications extends React.PureComponent {
     const { intl, notifications, isLoading, hasMore, showFilterBar, totalQueuedNotificationsCount } = this.props;
     const emptyMessage = <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />;
 
+    let scrollableContent = null;
+
     const filterBarContainer = showFilterBar
       ? (<FilterBarContainer />)
       : null;
 
-    const showLoading = isLoading && !notifications || notifications.isEmpty();
-
-    const scrollContainer  = (
-      <PullToRefresh onRefresh={this.handleRefresh}>
-        <Virtuoso
-          ref={this.setRef}
-          useWindowScroll
-          data={showLoading ? Array(20).fill() : notifications.toArray()}
-          startReached={this.handleScrollToTop}
-          endReached={this.handleLoadOlder}
-          isScrolling={isScrolling => isScrolling && this.handleScroll()}
-          itemContent={(_index, notification) => (
-            showLoading ? (
-              <PlaceholderNotification />
-            ) : (
-              <NotificationContainer
-                key={notification.id}
-                notification={notification}
-                onMoveUp={this.handleMoveUp}
-                onMoveDown={this.handleMoveDown}
-              />
-            )
-          )}
-          context={{
-            hasMore,
-          }}
-          components={{
-            ScrollSeekPlaceholder: PlaceholderNotification,
-            Footer,
-            EmptyPlaceholder: () => <Text>{emptyMessage}</Text>,
-            Item,
-          }}
+    if (isLoading && this.scrollableContent) {
+      scrollableContent = this.scrollableContent;
+    } else if (notifications.size > 0 || hasMore) {
+      scrollableContent = notifications.map((item, index) => (
+        <NotificationContainer
+          key={item.get('id')}
+          notification={item}
+          onMoveUp={this.handleMoveUp}
+          onMoveDown={this.handleMoveDown}
         />
-      </PullToRefresh>
+      ));
+    } else {
+      scrollableContent = null;
+    }
+
+    this.scrollableContent = scrollableContent;
+
+    const scrollContainer = (
+      <ScrollableList
+        scrollKey='notifications'
+        isLoading={isLoading}
+        showLoading={isLoading && notifications.size === 0}
+        hasMore={hasMore}
+        emptyMessage={emptyMessage}
+        placeholderComponent={PlaceholderNotification}
+        placeholderCount={20}
+        onLoadMore={this.handleLoadOlder}
+        onRefresh={this.handleRefresh}
+        onScrollToTop={this.handleScrollToTop}
+        onScroll={this.handleScroll}
+        className={classNames({
+          'divide-y divide-gray-200 dark:divide-gray-600 divide-solid': notifications.size > 0,
+          'space-y-2': notifications.size === 0,
+        })}
+      >
+        {scrollableContent}
+      </ScrollableList>
     );
 
     return (