feat(cards): refine controls and modal transitions

src/entities/bank-card/ui/CategoryManager.tsx

@@ -53,6 +53,7 @@ const CategoryFields: FC = () => {
 };
 const CategoryManager: FC<CategoryManagerProps> = (props) => {
 	useBankFormFocus();
+	const [opened, setOpened] = useState(true);
 	const { t } = useTranslation();
 	const categories = useBankCategories();
 	const mutation = useBankMutations();
@@ -83,11 +84,12 @@ const CategoryManager: FC<CategoryManagerProps> = (props) => {
 		),
 		defaultValues: { name: "" },
 	});
-	const pending = methods.formState.isSubmitting;
+	const pending = !opened || methods.formState.isSubmitting;
 	return (
 		<Modal
-			opened
-			onClose={() => !pending && props.onClose()}
+			opened={opened}
+			onExitTransitionEnd={props.onClose}
+			onClose={() => !pending && setOpened(false)}
 			title={t("bank.categories")}
 			closeOnClickOutside={!pending}
 			closeOnEscape={!pending}
@@ -205,7 +207,7 @@ const CategoryManager: FC<CategoryManagerProps> = (props) => {
 										{t("bank.cancel")}
 									</Button>
 								)}
-								<Button variant="default" onClick={props.onClose}>
+								<Button variant="default" onClick={() => setOpened(false)}>
 									{t("bank.close")}
 								</Button>
 							</Group>