improved aliases page

src/route-widgets/AliasRoute/CreateRandomAliasButton.tsx

@@ -15,7 +15,7 @@ export interface CreateRandomAliasButtonProps {
 export default function CreateRandomAliasButton({
 	onCreated,
 }: CreateRandomAliasButtonProps): ReactElement {
-	const {mutate} = useMutation<Alias, AxiosError, CreateAliasData>(
+	const {mutate, isLoading} = useMutation<Alias, AxiosError, CreateAliasData>(
 		createAlias,
 		{
 			onSuccess: onCreated,
@@ -24,6 +24,7 @@ export default function CreateRandomAliasButton({
 
 	return (
 		<Button
+			disabled={isLoading}
 			startIcon={<BsArrowClockwise />}
 			onClick={() =>
 				mutate({

src/routes/AliasesRoute.tsx

@@ -1,7 +1,7 @@
 import {ReactElement} from "react"
 import {AxiosError} from "axios"
 
-import {List} from "@mui/material"
+import {Grid, List, Typography} from "@mui/material"
 import {useQuery} from "@tanstack/react-query"
 
 import {Alias} from "~/server-types"
@@ -18,6 +18,11 @@ export default function AliasesRoute(): ReactElement {
 	} = useQuery<Array<Alias>, AxiosError>(["get_aliases"], getAliases)
 
 	return (
+		<Grid direction="column" container spacing={4}>
+			<Grid item>
+				<Typography variant="h6" component="h2">
+					Random Aliases
+				</Typography>
 				<List>
 					{isLoading ? (
 						<LoadingData />
@@ -26,7 +31,11 @@ export default function AliasesRoute(): ReactElement {
 							<AliasListItem key={alias.id} alias={alias} />
 						))
 					)}
-			<CreateRandomAliasButton onCreated={() => refetch()} />
 				</List>
+			</Grid>
+			<Grid item>
+				<CreateRandomAliasButton onCreated={() => refetch()} />
+			</Grid>
+		</Grid>
 	)
 }