devstack/authorizer
4
0
Fork 0
Code Pull Requests Actions Activity

loader added to user dashboard

Browse Source
This commit is contained in:
Anik Ghosh 2022-01-31 11:33:35 +05:30
parent 34a91f3195
commit cfe035e96b
1 changed files with 201 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
dashboard/src/pages/Users.tsx
View File

@ -28,6 +28,7 @@ import {
MenuList, MenuList,
MenuItem, MenuItem,
useToast, useToast,
Spinner,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { import {
FaAngleLeft, FaAngleLeft,
@ -97,7 +98,9 @@ export default function Users() {
maxPages: 1, maxPages: 1,
}); });
const [userList, setUserList] = React.useState<userDataTypes[]>([]); const [userList, setUserList] = React.useState<userDataTypes[]>([]);
const [loading, setLoading] = React.useState<boolean>(false);
const updateUserList = async () => { const updateUserList = async () => {
setLoading(true);
const { data } = await client const { data } = await client
.query(UserDetailsQuery, { .query(UserDetailsQuery, {
params: { params: {
@ -114,6 +117,7 @@ export default function Users() {
setPaginationProps({ ...paginationProps, ...pagination, maxPages }); setPaginationProps({ ...paginationProps, ...pagination, maxPages });
setUserList(users); setUserList(users);
} }
setLoading(false);
}; };
React.useEffect(() => { React.useEffect(() => {
updateUserList(); updateUserList();
@ -161,7 +165,8 @@ export default function Users() {
Users Users
</Text> </Text>
</Flex> </Flex>
{userList.length > 0 ? ( {!loading ? (
userList.length > 0 ? (
<Table variant="simple"> <Table variant="simple">
<Thead> <Thead>
<Tr> <Tr>
@ -221,7 +226,11 @@ export default function Users() {
</Tbody> </Tbody>
{paginationProps.maxPages > 1 && ( {paginationProps.maxPages > 1 && (
<TableCaption> <TableCaption>
<Flex justifyContent="space-between" alignItems="center" m="2% 0"> <Flex
justifyContent="space-between"
alignItems="center"
m="2% 0"
>
<Flex flex="1"> <Flex flex="1">
<Tooltip label="First Page"> <Tooltip label="First Page">
<IconButton <IconButton
@ -357,6 +366,11 @@ export default function Users() {
No Data No Data
</Text> </Text>
</Flex> </Flex>
)
) : (
<Center minH="25vh">
<Spinner />
</Center>
)} )}
</Box> </Box>
); );