2 files changed, 50 insertions, 16 deletions
diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 749c6b7..80a1386 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -94,7 +94,7 @@ const PollCard: React.FC<PropTypes> = React.memo(({ poll, setPoll }) => {
   const dominant: Which = left.votes >= right.votes ? 'left' : 'right';
 
   return (
-    <Card>
+    <Card elevation={3}>
       <UserStrip user={author} info={date} />
       <div className={classes.media}>
         <CardActionArea onDoubleClick={handleLeft} className={classes.media}>
diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx
index 41f9966..039639d 100644
--- a/src/components/PollsList/PollsList.tsx
+++ b/src/components/PollsList/PollsList.tsx
@@ -1,6 +1,13 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState, useMemo } from 'react';
+import {
+  WindowScroller,
+  AutoSizer,
+  List,
+  InfiniteLoader
+} from 'react-virtualized';
+import _ from 'lodash';
 import { Poll } from 'which-types';
-import { WindowScroller, AutoSizer, List } from 'react-virtualized';
+
 import RenderItem from './RenderItem';
 
 interface PropTypes {
@@ -8,7 +15,11 @@ interface PropTypes {
   mutate: (polls: Poll[], refetch: boolean) => void;
 }
 
+const PAGE_SIZE = 10;
+
 const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
+  const [displayCount, setDisplayCount] = useState<number>(PAGE_SIZE);
+
   const rowRenderer = useCallback(({ index, style, key }) => (
     <RenderItem
       polls={polls}
@@ -20,6 +31,18 @@ const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
     />
   ), [polls, mutate]);
 
+  const loadMoreRows = useCallback(async () => {
+    setDisplayCount(previousCount => previousCount + PAGE_SIZE);
+  }, []);
+
+  const isRowLoaded = useCallback(({ index }) => {
+    return index < displayCount - 1 || displayCount === polls.length;
+  }, [displayCount, polls]);
+
+  const rowCount = useMemo(() => {
+    return _.min([displayCount, polls.length]) || polls.length;
+  }, [displayCount, polls.length]);
+
   return (
     <WindowScroller>
       {({
@@ -32,19 +55,30 @@ const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
         <AutoSizer disableHeight>
           {({ width }) => (
             <div ref={registerChild}>
-              <List
-                autoHeight
-                height={height}
-                isScrolling={isScrolling}
-                onScroll={onChildScroll}
-                rowCount={polls.length}
-                rowHeight={550}
-                rowRenderer={rowRenderer}
-                scrollTop={scrollTop}
-                width={width}
-                containerStyle={{ pointerEvents: 'auto' }}
-                overscanRowCount={2}
-              />
+              <InfiniteLoader
+                isRowLoaded={isRowLoaded}
+                loadMoreRows={loadMoreRows}
+                rowCount={rowCount}
+                threshold={1}
+              >
+                {({ onRowsRendered, registerChild: ref }) => (
+                  <List
+                    autoHeight
+                    height={height}
+                    isScrolling={isScrolling}
+                    onScroll={onChildScroll}
+                    rowCount={rowCount}
+                    rowHeight={550}
+                    rowRenderer={rowRenderer}
+                    scrollTop={scrollTop}
+                    width={width}
+                    containerStyle={{ pointerEvents: 'auto' }}
+                    overscanRowCount={2}
+                    onRowsRendered={onRowsRendered}
+                    ref={ref}
+                  />
+                )}
+              </InfiniteLoader>
             </div>
           )}
         </AutoSizer>