loader added to user dashboard

dashboard/src/pages/Users.tsx

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