Virtualize Messages List - only render what's visible

ts/state/smart/Timeline.tsx

@@ -1,3 +1,4 @@
+import { pick } from 'lodash';
 import React from 'react';
 import { connect } from 'react-redux';
 import { mapDispatchToProps } from '../actions';
@@ -5,32 +6,59 @@ import { Timeline } from '../../components/conversation/Timeline';
 import { StateType } from '../reducer';
 
 import { getIntl } from '../selectors/user';
-import { getConversationSelector } from '../selectors/conversations';
+import {
+  getConversationMessagesSelector,
+  getConversationSelector,
+} from '../selectors/conversations';
 
 import { SmartTimelineItem } from './TimelineItem';
+import { SmartTypingBubble } from './TypingBubble';
+import { SmartLastSeenIndicator } from './LastSeenIndicator';
+import { SmartTimelineLoadingRow } from './TimelineLoadingRow';
 
 // Workaround: A react component's required properties are filtering up through connect()
 //   https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363
 const FilteredSmartTimelineItem = SmartTimelineItem as any;
+const FilteredSmartTypingBubble = SmartTypingBubble as any;
+const FilteredSmartLastSeenIndicator = SmartLastSeenIndicator as any;
+const FilteredSmartTimelineLoadingRow = SmartTimelineLoadingRow as any;
 
 type ExternalProps = {
   id: string;
+
+  // Note: most action creators are not wired into redux; for now they
+  //   are provided by ConversationView in setupTimeline().
 };
 
-const mapStateToProps = (state: StateType, props: ExternalProps) => {
-  const { id } = props;
+function renderItem(messageId: string, actionProps: Object): JSX.Element {
+  return <FilteredSmartTimelineItem {...actionProps} id={messageId} />;
+}
+function renderLastSeenIndicator(id: string): JSX.Element {
+  return <FilteredSmartLastSeenIndicator id={id} />;
+}
+function renderLoadingRow(id: string): JSX.Element {
+  return <FilteredSmartTimelineLoadingRow id={id} />;
+}
+function renderTypingBubble(id: string): JSX.Element {
+  return <FilteredSmartTypingBubble id={id} />;
+}
 
-  const conversationSelector = getConversationSelector(state);
-  const conversation = conversationSelector(id);
-  const items: Array<string> = [];
+const mapStateToProps = (state: StateType, props: ExternalProps) => {
+  const { id, ...actions } = props;
+
+  const conversation = getConversationSelector(state)(id);
+  const conversationMessages = getConversationMessagesSelector(state)(id);
 
   return {
-    ...conversation,
-    items,
+    id,
+    ...pick(conversation, ['unreadCount', 'typingContact']),
+    ...conversationMessages,
     i18n: getIntl(state),
-    renderTimelineItem: (messageId: string) => {
-      return <FilteredSmartTimelineItem id={messageId} />;
-    },
+    renderItem,
+    renderLastSeenIndicator,
+    renderLoadingRow,
+    renderTypingBubble,
+    ...actions,
   };
 };