JournalEntries: use a virtualized list for the entries.

src/App.tsx

@@ -20,6 +20,8 @@ import NavigationBack from '@material-ui/icons/ArrowBack';
 import NavigationRefresh from '@material-ui/icons/Refresh';
 import ErrorsIcon from '@material-ui/icons/Error';
 
+import 'react-virtualized/styles.css'; // only needs to be imported once
+
 import './App.css';
 
 import ConfirmationDialog from './widgets/ConfirmationDialog';

src/components/AddressBook.tsx

@@ -7,7 +7,6 @@ import { createSelector } from 'reselect';
 
 import * as colors from '@material-ui/core/colors';
 import { AutoSizer, List as VirtualizedList } from 'react-virtualized';
-import 'react-virtualized/styles.css'; // only needs to be imported once
 
 import { Avatar } from '../widgets/Avatar';
 import { List, ListItem } from '../widgets/List';

src/components/JournalEntries.tsx

@@ -3,6 +3,8 @@
 
 import * as Immutable from 'immutable';
 
+import { AutoSizer, List as VirtualizedList } from 'react-virtualized';
+
 import * as React from 'react';
 import { List, ListItem } from '../widgets/List';
 import Dialog from '@material-ui/core/Dialog';
@@ -44,7 +46,9 @@ class JournalEntries extends React.PureComponent {
       return (<div>Loading</div>);
     }
 
-    const entries = this.props.entries.map((syncEntry, idx) => {
+    const rowRenderer = (params: { index: number, key: string, style: React.CSSProperties }) => {
+      const { key, index, style } = params;
+      const syncEntry = this.props.entries.get(this.props.entries.size - index - 1)!;
       let comp;
       try {
         comp = parseString(syncEntry.content);
@@ -52,7 +56,8 @@ class JournalEntries extends React.PureComponent {
         const icon = (<IconError style={{ color: 'red' }} />);
         return (
           <ListItem
-            key={idx}
+            key={key}
+            style={style}
             leftIcon={icon}
             primaryText="Failed parsing item"
             secondaryText="Unknown"
@@ -101,7 +106,8 @@ class JournalEntries extends React.PureComponent {
 
       return (
         <ListItem
-          key={idx}
+          key={key}
+          style={style}
           leftIcon={icon}
           primaryText={name}
           secondaryText={uid}
@@ -112,7 +118,7 @@ class JournalEntries extends React.PureComponent {
           }}
         />
       );
-    }).reverse();
+    };
 
     return (
       <div>
@@ -139,8 +145,18 @@ class JournalEntries extends React.PureComponent {
             </Button>
           </DialogActions>
         </Dialog>
-        <List>
+        <List style={{ height: 'calc(100vh - 300px)' }}>
-          {entries}
+          <AutoSizer>
+            {({ height, width }) => (
+              <VirtualizedList
+                width={width}
+                height={height}
+                rowCount={this.props.entries.size}
+                rowHeight={56}
+                rowRenderer={rowRenderer}
+              />
+            )}
+          </AutoSizer>
         </List>
       </div>
     );