From f8c53f8a88577cb066a60d8069c9e2da481ca036 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 25 Feb 2020 22:50:18 -0800
Subject: [PATCH] fix: Pagination of people list items (#1192)

---
 app/scenes/Settings/People.js | 30 ++++++++++++------------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/app/scenes/Settings/People.js b/app/scenes/Settings/People.js
index 0137730db..7eb87048f 100644
--- a/app/scenes/Settings/People.js
+++ b/app/scenes/Settings/People.js
@@ -6,17 +6,16 @@ import { observer, inject } from 'mobx-react';
 import { PlusIcon } from 'outline-icons';
 
 import Empty from 'components/Empty';
-import { ListPlaceholder } from 'components/LoadingPlaceholder';
 import Modal from 'components/Modal';
 import Button from 'components/Button';
 import Invite from 'scenes/Invite';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
 import HelpText from 'components/HelpText';
-import UserListItem from './components/UserListItem';
-import List from 'components/List';
+import PaginatedList from 'components/PaginatedList';
 import Tabs, { Separator } from 'components/Tabs';
 import Tab from 'components/Tab';
+import UserListItem from './components/UserListItem';
 
 import AuthStore from 'stores/AuthStore';
 import UsersStore from 'stores/UsersStore';
@@ -33,10 +32,6 @@ type Props = {
 class People extends React.Component<Props> {
   @observable inviteModalOpen: boolean = false;
 
-  componentDidMount() {
-    this.props.users.fetchPage({ limit: 100 });
-  }
-
   handleInviteModalOpen = () => {
     this.inviteModalOpen = true;
   };
@@ -64,8 +59,6 @@ class People extends React.Component<Props> {
       users = this.props.users.invited;
     }
 
-    const showLoading = this.props.users.isFetching && !users.length;
-    const showEmpty = this.props.users.isLoaded && !users.length;
     const can = policies.abilities(team.id);
 
     return (
@@ -114,17 +107,18 @@ class People extends React.Component<Props> {
             </React.Fragment>
           )}
         </Tabs>
-        <List>
-          {users.map(user => (
+        <PaginatedList
+          items={users}
+          empty={<Empty>No people to see here.</Empty>}
+          fetch={this.props.users.fetchPage}
+          renderItem={item => (
             <UserListItem
-              key={user.id}
-              user={user}
-              showMenu={can.update && currentUser.id !== user.id}
+              key={item.id}
+              user={item}
+              showMenu={can.update && currentUser.id !== item.id}
             />
-          ))}
-        </List>
-        {showEmpty && <Empty>No people to see here.</Empty>}
-        {showLoading && <ListPlaceholder count={5} />}
+          )}
+        />
 
         <Modal
           title="Invite people"