refactor: add loading action

This commit is contained in:
Mauricio Siu
2025-02-09 03:06:18 -06:00
parent 17ce03e529
commit 0a6554c275

View File

@@ -198,6 +198,7 @@ export const extractServices = (data: Project | undefined) => {
const Project = ( const Project = (
props: InferGetServerSidePropsType<typeof getServerSideProps>, props: InferGetServerSidePropsType<typeof getServerSideProps>,
) => { ) => {
const [isBulkActionLoading, setIsBulkActionLoading] = useState(false);
const { projectId } = props; const { projectId } = props;
const { data: auth } = api.auth.get.useQuery(); const { data: auth } = api.auth.get.useQuery();
const { data: user } = api.user.byAuthId.useQuery( const { data: user } = api.user.byAuthId.useQuery(
@@ -262,6 +263,7 @@ const Project = (
const handleBulkStart = async () => { const handleBulkStart = async () => {
let success = 0; let success = 0;
setIsBulkActionLoading(true);
for (const serviceId of selectedServices) { for (const serviceId of selectedServices) {
try { try {
await composeActions.start.mutateAsync({ composeId: serviceId }); await composeActions.start.mutateAsync({ composeId: serviceId });
@@ -274,12 +276,14 @@ const Project = (
toast.success(`${success} services started successfully`); toast.success(`${success} services started successfully`);
refetch(); refetch();
} }
setIsBulkActionLoading(false);
setSelectedServices([]); setSelectedServices([]);
setIsDropdownOpen(false); setIsDropdownOpen(false);
}; };
const handleBulkStop = async () => { const handleBulkStop = async () => {
let success = 0; let success = 0;
setIsBulkActionLoading(true);
for (const serviceId of selectedServices) { for (const serviceId of selectedServices) {
try { try {
await composeActions.stop.mutateAsync({ composeId: serviceId }); await composeActions.stop.mutateAsync({ composeId: serviceId });
@@ -294,6 +298,7 @@ const Project = (
} }
setSelectedServices([]); setSelectedServices([]);
setIsDropdownOpen(false); setIsDropdownOpen(false);
setIsBulkActionLoading(false);
}; };
const filteredServices = useMemo(() => { const filteredServices = useMemo(() => {
@@ -405,6 +410,7 @@ const Project = (
<Button <Button
variant="outline" variant="outline"
disabled={selectedServices.length === 0} disabled={selectedServices.length === 0}
isLoading={isBulkActionLoading}
> >
Bulk Actions Bulk Actions
</Button> </Button>