Improved a bit of the pagination

src/pages/(admin)/Lists/UserList.tsx

@@ -63,13 +63,13 @@ export default function UserList({
 	const userHash = useMemo(
 		() => ({
 			type,
-			size: 25,
+			size: 16,
 			page,
 		}),
 		[type, page],
 	);
 
-	const {users, total, reload} = useUsers(userHash);
+	const {users, total, isLoading, reload} = useUsers(userHash);
 	const {permissions} = usePermissions(user?.id || "");
 	const {balance} = useUserBalance();
 	const {groups} = useGroups({
@@ -625,13 +625,26 @@ export default function UserList({
 						</Button>
 					</div>
 					<div className="w-full flex gap-2 justify-between">
-						<Button className="w-full max-w-[200px]" disabled={page === 0} onClick={() => setPage((prev) => prev - 1)}>
+						<Button
+							isLoading={isLoading}
+							className="w-full max-w-[200px]"
+							disabled={page === 0}
+							onClick={() => setPage((prev) => prev - 1)}>
 							Previous Page
 						</Button>
-						<Button className="w-full max-w-[200px]" disabled={page * 25 >= total} onClick={() => setPage((prev) => prev + 1)}>
+						<div className="flex items-center gap-4 w-fit">
+							<span className="opacity-80">
+								{page * 16 + 1} - {(page + 1) * 16 > total ? total : (page + 1) * 16} / {total}
+							</span>
+							<Button
+								isLoading={isLoading}
+								className="w-[200px]"
+								disabled={page * 16 >= total}
+								onClick={() => setPage((prev) => prev + 1)}>
 								Next Page
 							</Button>
 						</div>
+					</div>
 					<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
 						<thead>
 							{table.getHeaderGroups().map((headerGroup) => (
@@ -644,7 +657,7 @@ export default function UserList({
 								</tr>
 							))}
 						</thead>
-						<tbody className="px-2">
+						<tbody className="px-2 w-full">
 							{table.getRowModel().rows.map((row) => (
 								<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
 									{row.getVisibleCells().map((cell) => (