diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx index 1874d43eb..46a18d881 100644 --- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx +++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx @@ -1,11 +1,12 @@ "use client"; -import { useCallback } from "react"; +import { useCallback, useState } from "react"; import type { SelectProps } from "@mantine/core"; import { Button, Flex, Group, + Loader, Select, Stack, Table, @@ -241,7 +242,8 @@ interface FormType { interface InnerProps { presentUserIds: string[]; - onSelect: (props: { id: string; name: string }) => void; + onSelect: (props: { id: string; name: string }) => void | Promise; + confirmLabel?: string; } interface UserSelectFormType { @@ -251,40 +253,45 @@ interface UserSelectFormType { export const UserSelectModal = createModal( ({ actions, innerProps }) => { const t = useI18n(); - const { data: users } = clientApi.user.selectable.useQuery(); + const { data: users, isPending } = clientApi.user.selectable.useQuery(); + const [loading, setLoading] = useState(false); const form = useForm(); - const handleSubmit = (values: UserSelectFormType) => { + const handleSubmit = async (values: UserSelectFormType) => { const currentUser = users?.find((user) => user.id === values.userId); if (!currentUser) return; - innerProps.onSelect({ + setLoading(true); + await innerProps.onSelect({ id: currentUser.id, name: currentUser.name ?? "", }); + + setLoading(false); actions.closeModal(); }; + const confirmLabel = innerProps.confirmLabel ?? t("common.action.add"); + return ( -
+ void handleSubmit(values))}>