Render only visible conversations in left pane

ts/components/LeftPane.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { AutoSizer, List } from 'react-virtualized';
 
 import {
   ConversationListItem,
@@ -23,11 +24,39 @@ export interface Props {
   renderMainHeader: () => JSX.Element;
 }
 
+// from https://github.com/bvaughn/react-virtualized/blob/fb3484ed5dcc41bffae8eab029126c0fb8f7abc0/source/List/types.js#L5
+type RowRendererParams = {
+  index: number;
+  isScrolling: boolean;
+  isVisible: boolean;
+  key: string;
+  parent: Object;
+  style: Object;
+};
+
 export class LeftPane extends React.Component<Props> {
+  public renderRow = ({ index, key, style }: RowRendererParams) => {
+    const { conversations, i18n, openConversationInternal } = this.props;
+    if (!conversations) {
+      return null;
+    }
+    const conversation = conversations[index];
+
+    return (
+      <ConversationListItem
+        key={key}
+        style={style}
+        {...conversation}
+        onClick={openConversationInternal}
+        i18n={i18n}
+      />
+    );
+  };
+
   public renderList() {
     const {
-      conversations,
       i18n,
+      conversations,
       openConversationInternal,
       startNewConversation,
       searchResults,
@@ -44,16 +73,28 @@ export class LeftPane extends React.Component<Props> {
       );
     }
 
+    if (!conversations || !conversations.length) {
+      return null;
+    }
+
+    // Note: conversations is not a known prop for List, but it is required to ensure that
+    //   it re-renders when our conversation data changes. Otherwise it would just render
+    //   on startup and scroll.
     return (
       <div className="module-left-pane__list">
-        {(conversations || []).map(conversation => (
-          <ConversationListItem
-            key={conversation.phoneNumber}
-            {...conversation}
-            onClick={openConversationInternal}
-            i18n={i18n}
-          />
-        ))}
+        <AutoSizer>
+          {({ height, width }) => (
+            <List
+              className="module-left-pane__virtual-list"
+              conversations={conversations}
+              height={height}
+              rowCount={conversations.length}
+              rowHeight={64}
+              rowRenderer={this.renderRow}
+              width={width}
+            />
+          )}
+        </AutoSizer>
       </div>
     );
   }