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} /> <Skeleton animation="wave" height={20} width={80} />
</TableCell> </TableCell>
<TableCell> <TableCell>
<Skeleton animation="wave" height={20} width={70} /> <Skeleton animation="wave" height={20} width={80} />
</TableCell>
<TableCell></TableCell>
<TableCell align="right"></TableCell>
</TableRow>
<TableRow>
<TableCell style={{ paddingRight: 0 }}>
<Skeleton animation="wave" variant="circle" width={40} height={40} />
</TableCell> </TableCell>
<TableCell> <TableCell>
<Skeleton animation="wave" height={20} width={80} /> <Skeleton animation="wave" height={20} width={80} />
</TableCell> </TableCell>
<TableCell>
<Skeleton animation="wave" height={20} width={70} />
</TableCell>
<TableCell></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> </TableRow>
</> </>
); );

View File

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

View File

@@ -249,9 +249,6 @@ const Users = () => {
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{loading ? (
<TableRowSkeleton />
) : (
<> <>
{users.map(user => ( {users.map(user => (
<TableRow key={user.id}> <TableRow key={user.id}>
@@ -278,8 +275,8 @@ const Users = () => {
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
{loading && <TableRowSkeleton />}
</> </>
)}
</TableBody> </TableBody>
</Table> </Table>
</Paper> </Paper>