feat(cards): refine controls and modal transitions

src/pages/card/ui/OperationForm.tsx

@@ -47,6 +47,7 @@ type OperationFormProps = {
 };
 const OperationForm: FC<OperationFormProps> = (props) => {
 	useBankFormFocus();
+	const [opened, setOpened] = useState(true);
 	const { t } = useTranslation();
 	const [categoriesOpen, setCategoriesOpen] = useState(false);
 	const [version, setVersion] = useState(props.operation?.version ?? 1);
@@ -164,15 +165,16 @@ const OperationForm: FC<OperationFormProps> = (props) => {
 		{ page: sourcePage },
 	);
 	const source = methods.watch("cardId");
-	const pending = methods.formState.isSubmitting;
+	const pending = !opened || methods.formState.isSubmitting;
 	const options = props.cards
 		.filter((c) => !c.archivedAt)
 		.map((c) => ({ value: c.id, label: c.name }));
 	return (
 		<>
 			<Modal
-				opened
-				onClose={() => !pending && !categoriesOpen && props.onClose()}
+				opened={opened}
+				onExitTransitionEnd={props.onClose}
+				onClose={() => !pending && !categoriesOpen && setOpened(false)}
 				title={t(props.operation ? "bank.editOperation" : "bank.addOperation")}
 				closeOnEscape={!pending && !categoriesOpen}
 				closeOnClickOutside={!pending && !categoriesOpen}
@@ -217,7 +219,7 @@ const OperationForm: FC<OperationFormProps> = (props) => {
 										id: intent,
 										...body,
 									});
-								props.onClose();
+								setOpened(false);
 							} catch (failure) {
 								setError(failure);
 							}
@@ -392,7 +394,7 @@ const OperationForm: FC<OperationFormProps> = (props) => {
 									>
 										{t("bank.save")}
 									</Button>
-									<Button variant="default" onClick={props.onClose}>
+									<Button variant="default" onClick={() => setOpened(false)}>
 										{t("bank.cancel")}
 									</Button>
 								</Group>