fix: users infinity scroll refreshing all page

This commit is contained in:
canove
2020-09-29 06:49:52 -03:00
parent d78df2bf2e
commit 86dfe3e427
3 changed files with 29 additions and 82 deletions

View File

@@ -14,62 +14,12 @@ const TableRowSkeleton = () => {
<Skeleton animation="wave" height={20} width={80} />
</TableCell>
<TableCell>
<Skeleton animation="wave" height={20} width={70} />
</TableCell>
<TableCell></TableCell>
<TableCell align="right"></TableCell>
</TableRow>
<TableRow>
<TableCell style={{ paddingRight: 0 }}>
<Skeleton animation="wave" variant="circle" width={40} height={40} />
<Skeleton animation="wave" height={20} width={80} />
</TableCell>
<TableCell>
<Skeleton animation="wave" height={20} width={80} />
</TableCell>
<TableCell>
<Skeleton animation="wave" height={20} width={70} />
</TableCell>
<TableCell></TableCell>
<TableCell align="right"></TableCell>
</TableRow>
<TableRow>
<TableCell style={{ paddingRight: 0 }}>
<Skeleton animation="wave" variant="circle" width={40} height={40} />
</TableCell>
<TableCell>
<Skeleton animation="wave" height={20} width={80} />
</TableCell>
<TableCell>
<Skeleton animation="wave" height={20} width={70} />
</TableCell>
<TableCell></TableCell>
<TableCell align="right"></TableCell>
</TableRow>
<TableRow>
<TableCell style={{ paddingRight: 0 }}>
<Skeleton animation="wave" variant="circle" width={40} height={40} />
</TableCell>
<TableCell>
<Skeleton animation="wave" height={20} width={80} />
</TableCell>
<TableCell>
<Skeleton animation="wave" height={20} width={70} />
</TableCell>
<TableCell></TableCell>
<TableCell align="right"></TableCell>
</TableRow>
<TableRow>
<TableCell style={{ paddingRight: 0 }}>
<Skeleton animation="wave" variant="circle" width={40} height={40} />
</TableCell>
<TableCell>
<Skeleton animation="wave" height={20} width={80} />
</TableCell>
<TableCell>
<Skeleton animation="wave" height={20} width={70} />
</TableCell>
<TableCell></TableCell>
<TableCell align="right"></TableCell>
</TableRow>
</>
);

View File

@@ -121,7 +121,7 @@ const Contacts = () => {
}
};
fetchContacts();
}, 500);
}, 5000);
return () => clearTimeout(delayDebounceFn);
}, [searchParam, pageNumber]);

View File

@@ -249,37 +249,34 @@ const Users = () => {
</TableRow>
</TableHead>
<TableBody>
{loading ? (
<TableRowSkeleton />
) : (
<>
{users.map(user => (
<TableRow key={user.id}>
<TableCell>{user.name}</TableCell>
<TableCell>{user.email}</TableCell>
<TableCell>{user.profile}</TableCell>
<TableCell align="right">
<IconButton
size="small"
onClick={() => handleEditUser(user)}
>
<EditIcon />
</IconButton>
<>
{users.map(user => (
<TableRow key={user.id}>
<TableCell>{user.name}</TableCell>
<TableCell>{user.email}</TableCell>
<TableCell>{user.profile}</TableCell>
<TableCell align="right">
<IconButton
size="small"
onClick={() => handleEditUser(user)}
>
<EditIcon />
</IconButton>
<IconButton
size="small"
onClick={e => {
setConfirmModalOpen(true);
setDeletingUser(user);
}}
>
<DeleteOutlineIcon />
</IconButton>
</TableCell>
</TableRow>
))}
</>
)}
<IconButton
size="small"
onClick={e => {
setConfirmModalOpen(true);
setDeletingUser(user);
}}
>
<DeleteOutlineIcon />
</IconButton>
</TableCell>
</TableRow>
))}
{loading && <TableRowSkeleton />}
</>
</TableBody>
</Table>
</Paper>