feat: show polls gradually in PollsList

1 files changed, 47 insertions, 15 deletions

diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx
index 41f9966..b9cf313 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 } 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,16 @@ const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
     />
   ), [polls, mutate]);
 
+  const loadMoreRows = useCallback(async () => {
+    setDisplayCount(previousCount => {
+      return _.min([polls.length, previousCount + PAGE_SIZE]) || polls.length;
+    });
+  }, [polls]);
+
+  const isRowLoaded = useCallback(({ index }) => {
+    return index < displayCount - 1 || displayCount === polls.length;
+  }, [displayCount, polls]);
+
   return (
     <WindowScroller>
       {({
@@ -32,19 +53,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={displayCount}
+                threshold={1}
+              >
+                {({ onRowsRendered, registerChild: ref }) => (
+                  <List
+                    autoHeight
+                    height={height}
+                    isScrolling={isScrolling}
+                    onScroll={onChildScroll}
+                    rowCount={displayCount}
+                    rowHeight={550}
+                    rowRenderer={rowRenderer}
+                    scrollTop={scrollTop}
+                    width={width}
+                    containerStyle={{ pointerEvents: 'auto' }}
+                    overscanRowCount={2}
+                    onRowsRendered={onRowsRendered}
+                    ref={ref}
+                  />
+                )}
+              </InfiniteLoader>
             </div>
           )}
         </AutoSizer>