More navigation bugs and fixed broken modal during transition

src/components/QuestionsModal.tsx

@@ -1,5 +1,5 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, useCallback, useEffect, useState } from "react";
 import Button from "./Low/Button";
 
 interface Props {
@@ -11,21 +11,55 @@ interface Props {
 
 export default function QuestionsModal({ isOpen, onClose, type = "module", unanswered = false }: Props) {
 	const [isClosing, setIsClosing] = useState(false);
+	const [mounted, setMounted] = useState(false);
 
-	const blockMultipleClicksClose = (x: boolean) => {
-		if (!isClosing) {
-			setIsClosing(true);
-			onClose(x);
+	useEffect(() => {
+		if (isOpen) {
+			setMounted(true);
 		}
+	}, [isOpen]);
 
-		setTimeout(() => {
+	useEffect(() => {
+		if (!isOpen && mounted) {
+			const timer = setTimeout(() => {
+				setMounted(false);
+				setIsClosing(false);
+			}, 300);
+			return () => clearTimeout(timer);
+		}
+	}, [isOpen, mounted]);
+
+	const blockMultipleClicksClose = useCallback((value: boolean) => {
+		if (isClosing) return;
+
+		setIsClosing(true);
+		onClose(value);
+
+		const timer = setTimeout(() => {
 			setIsClosing(false);
-		}, 400);
-	}
+		}, 300);
+
+		return () => clearTimeout(timer);
+	}, [isClosing, onClose]);
+
+	if (!mounted && !isOpen) return null;
 
 	return (
-		<Transition show={isOpen} as={Fragment}>
-			<Dialog onClose={() => onClose(false)} className="relative z-50">
+		<Transition
+			show={isOpen}
+			as={Fragment}
+			beforeEnter={() => setIsClosing(false)}
+			beforeLeave={() => setIsClosing(true)}
+			afterLeave={() => {
+				setIsClosing(false);
+				setMounted(false);
+			}}
+		>
+			<Dialog
+				onClose={() => blockMultipleClicksClose(false)}
+				className="relative z-50"
+				static
+			>
 				<Transition.Child
 					as={Fragment}
 					enter="ease-out duration-300"
@@ -33,7 +67,8 @@ export default function QuestionsModal({ isOpen, onClose, type = "module", unans
 					enterTo="opacity-100"
 					leave="ease-in duration-200"
 					leaveFrom="opacity-100"
-					leaveTo="opacity-0">
+					leaveTo="opacity-0"
+				>
 					<div className="fixed inset-0 bg-black/30" />
 				</Transition.Child>
 
@@ -44,7 +79,8 @@ export default function QuestionsModal({ isOpen, onClose, type = "module", unans
 					enterTo="opacity-100 scale-100"
 					leave="ease-in duration-200"
 					leaveFrom="opacity-100 scale-100"
-					leaveTo="opacity-0 scale-95">
+					leaveTo="opacity-0 scale-95"
+				>
 					<div className="fixed inset-0 flex items-center justify-center p-4">
 						<Dialog.Panel className="w-full max-w-2xl h-fit p-8 rounded-xl bg-white flex flex-col gap-4">
 							{type === "module" && (
@@ -57,10 +93,21 @@ export default function QuestionsModal({ isOpen, onClose, type = "module", unans
 										Are you sure you want to continue without completing those questions?
 									</span>
 									<div className="w-full flex justify-between mt-8">
-										<Button color="purple" onClick={() => blockMultipleClicksClose(false)} variant="outline" className="max-w-[200px] self-end w-full">
+										<Button
+											color="purple"
+											onClick={() => blockMultipleClicksClose(false)}
+											variant="outline"
+											className="max-w-[200px] self-end w-full"
+											disabled={isClosing}
+										>
 											Go Back
 										</Button>
-										<Button color="purple" onClick={() => blockMultipleClicksClose(true)} className="max-w-[200px] self-end w-full">
+										<Button
+											color="purple"
+											onClick={() => blockMultipleClicksClose(true)}
+											className="max-w-[200px] self-end w-full"
+											disabled={isClosing}
+										>
 											Continue
 										</Button>
 									</div>