1 files changed, 24 insertions, 7 deletions
diff --git a/src/components/PollsList/RenderItem.tsx b/src/components/PollsList/RenderItem.tsx
index beed259..28411ec 100644
--- a/src/components/PollsList/RenderItem.tsx
+++ b/src/components/PollsList/RenderItem.tsx
@@ -1,5 +1,7 @@
 import React, { useCallback } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
 import { Poll } from 'which-types';
+import { CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
 import PollCard from '../PollCard/PollCard';
 
 
@@ -8,23 +10,31 @@ interface PropTypes {
   mutate: (polls: Poll[], refetch: boolean) => void;
   index: number;
   style: React.CSSProperties;
+  cache: CellMeasurerCache;
+  parent: List;
   _key: string; // https://reactjs.org/warnings/special-props.html
 }
 
+const useStyles = makeStyles(theme => ({
+  root: {
+    paddingBottom: theme.spacing(8)
+  }
+}));
+
 const compareProps = (oldProps: PropTypes, newProps: PropTypes) => {
   if (oldProps._key !== newProps._key) return false;
   if (oldProps.index !== newProps.index) return false;
   if (oldProps.polls !== newProps.polls) return false;
-  // TODO: uncomment line below to listen to style updates
-  // if (JSON.stringify(oldProps.style)!== JSON.stringify(newProps.style)) return false;
+  // Only listen for height changes in style
+  if (oldProps.style.height !== newProps.style.height) return false;
   return true;
 };
 
 const RenderItem: React.FC<PropTypes> = React.memo(({
-  polls, mutate, index, style, _key
+  polls, mutate, index, style, cache, parent, _key
 }) => {
+  const classes = useStyles();
   const poll = polls[index];
-
   const setPoll = useCallback((newPoll: Poll) => {
     const newPolls = [...polls];
     newPolls[index] = newPoll;
@@ -35,9 +45,16 @@ const RenderItem: React.FC<PropTypes> = React.memo(({
   }, [mutate, index, polls]);
 
   return (
-    <div key={`${_key}-${poll._id}`} style={style}>
-      <PollCard poll={poll} setPoll={setPoll} />
-    </div>
+    <CellMeasurer
+      cache={cache}
+      columnIndex={0}
+      rowIndex={index}
+      parent={parent}
+    >
+      <div key={`${_key}-${poll._id}`} className={classes.root} style={style}>
+        <PollCard poll={poll} setPoll={setPoll} />
+      </div>
+    </CellMeasurer>
   );
 }, compareProps);