Delegate list gets slow when loading ~1000 delegates - Closes #260

src/components/voting/voting.js

@@ -169,8 +169,8 @@ class Voting extends React.Component {
               <TableCell>Uptime</TableCell>
               <TableCell>Approval</TableCell>
             </TableHead>
-            {this.state.delegates.map((item, idx) => (
-              <VotingRow key={idx} data={item} />
+            {this.state.delegates.map(item => (
+              <VotingRow key={item.address} data={item} />
             ))}
           </Table>
         </div>

src/components/voting/votingRow.js

@@ -12,9 +12,15 @@ const setRowClass = ({ pending, selected, voted }) => {
   return voted ? styles.downVoteRow : '';
 };
 
-const VotingRow = (props) => {
-  const { data } = props;
-  return (<TableRow {...props} className={`${styles.row} ${setRowClass(data)}`}>
+class VotingRow extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return !!nextProps.data.dirty;
+  }
+
+  render() {
+    const props = this.props;
+    const { data } = props;
+    return (<TableRow {...props} className={`${styles.row} ${setRowClass(data)}`}>
       <TableCell>
         <Checkbox styles={styles}
           value={data.selected}
@@ -28,7 +34,8 @@ const VotingRow = (props) => {
       <TableCell>{data.productivity} %</TableCell>
       <TableCell>{data.approval} %</TableCell>
     </TableRow>
-  );
-};
+    );
+  }
+}
 
 export default VotingRow;

src/components/voting/votingRow.test.js

@@ -9,7 +9,7 @@ describe('VotinRow', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = mount(<VotinRow data={{}}></VotinRow>,
+    wrapper = mount(<VotinRow data={{ dirty: true }}></VotinRow>,
       {
         context: { store },
         childContextTypes: { store: PropTypes.object.isRequired },
@@ -19,40 +19,40 @@ describe('VotinRow', () => {
 
   it('should TableRow has class name of "pendingRow" when props.data.pending is true', () => {
     wrapper.setProps({
-      data: { pending: true },
+      data: { pending: true, dirty: true },
     });
-    const expectedClass = /_pendingRow/g;
-    const html = wrapper.find('tr').html();
-    expect(html.match(expectedClass)).to.have.lengthOf(1);
+    const expectedClass = '_pendingRow';
+    const className = wrapper.find('tr').prop('className');
+    expect(className).to.contain(expectedClass);
   });
 
   it(`should TableRow has class name of "votedRow" when props.data.selected
    and props.data.voted are true`, () => {
     wrapper.setProps({
-      data: { selected: true, voted: true },
+      data: { selected: true, voted: true, dirty: true },
     });
-    const expectedClass = /_votedRow/g;
-    const html = wrapper.find('tr').html();
-    expect(html.match(expectedClass)).to.have.lengthOf(1);
+    const expectedClass = '_votedRow';
+    const className = wrapper.find('tr').prop('className');
+    expect(className).to.contain(expectedClass);
   });
 
   it(`should TableRow has class name of "downVoteRow" when props.data.selected
    is false and props.data.voted is true`, () => {
     wrapper.setProps({
-      data: { selected: false, voted: true },
+      data: { selected: false, voted: true, dirty: true },
     });
-    const expectedClass = /_downVoteRow/g;
-    const html = wrapper.find('tr').html();
-    expect(html.match(expectedClass)).to.have.lengthOf(1);
+    const expectedClass = '_downVoteRow';
+    const className = wrapper.find('tr').prop('className');
+    expect(className).to.contain(expectedClass);
   });
 
   it(`should TableRow has class name of "upVoteRow" when props.data.selected
    is true and props.data.voted is false`, () => {
     wrapper.setProps({
-      data: { selected: true, voted: false },
+      data: { selected: true, voted: false, dirty: true },
     });
-    const expectedClass = /_upVoteRow/g;
-    const html = wrapper.find('tr').html();
-    expect(html.match(expectedClass)).to.have.lengthOf(1);
+    const expectedClass = '_upVoteRow';
+    const className = wrapper.find('tr').prop('className');
+    expect(className).to.contain(expectedClass);
   });
 });

src/store/reducers/voting.js

@@ -47,7 +47,7 @@ const voting = (state = { votedList: [], unvotedList: [] }, action) => {
         refresh: false,
         votedList: [
           ...state.votedList,
-          Object.assign(action.data, { selected: true }),
+          Object.assign(action.data, { selected: true, dirty: true }),
         ],
       });
     case actionTypes.removedFromVoteList:
@@ -64,11 +64,16 @@ const voting = (state = { votedList: [], unvotedList: [] }, action) => {
         refresh: false,
         unvotedList: [
           ...state.unvotedList,
-          Object.assign(action.data, { selected: false }),
+          Object.assign(action.data, { selected: false, dirty: true }),
         ],
       });
-    case actionTypes.votesCleared:
     case actionTypes.accountLoggedOut:
+      return Object.assign({}, state, {
+        votedList: [],
+        unvotedList: [],
+        refresh: true,
+      });
+    case actionTypes.votesCleared:
       return Object.assign({}, state, {
         votedList: state.votedList.filter(item => !item.pending),
         unvotedList: state.unvotedList.filter(item => !item.pending),