From ea0e8e51e0ff2b8a54fd3afcc4365d40e0c48e3e Mon Sep 17 00:00:00 2001
From: Sam Chau <chaucted@gmail.com>
Date: Thu, 19 Sep 2024 10:07:13 +0930
Subject: [PATCH] fix: Modal animation improved - reduce complexity - works
 100% of the time now - fades in / out rather than up / down

---
 frontend/src/components/ui/Modal.jsx | 39 +++++++---------------------
 1 file changed, 9 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/ui/Modal.jsx b/frontend/src/components/ui/Modal.jsx
index ca249cc..1c1accf 100644
--- a/frontend/src/components/ui/Modal.jsx
+++ b/frontend/src/components/ui/Modal.jsx
@@ -1,4 +1,4 @@
-import {useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef} from 'react';
 import PropTypes from 'prop-types';
 
 function Modal({
@@ -13,25 +13,6 @@ function Modal({
     height = 'auto'
 }) {
     const modalRef = useRef();
-    const [isAnimating, setIsAnimating] = useState(false);
-    const [shouldRender, setShouldRender] = useState(false);
-    const [isClosing, setIsClosing] = useState(false);
-
-    useEffect(() => {
-        if (isOpen) {
-            setIsClosing(false);
-            setShouldRender(true);
-            setTimeout(() => setIsAnimating(true), 10);
-        } else {
-            setIsClosing(true);
-            setIsAnimating(false);
-            const timer = setTimeout(() => {
-                setShouldRender(false);
-                setIsClosing(false);
-            }, 300);
-            return () => clearTimeout(timer);
-        }
-    }, [isOpen]);
 
     useEffect(() => {
         if (isOpen && !disableCloseOnEscape) {
@@ -47,8 +28,6 @@ function Modal({
         }
     }, [isOpen, onClose, disableCloseOnEscape]);
 
-    if (!shouldRender && !isClosing) return null;
-
     const handleClickOutside = e => {
         if (
             modalRef.current &&
@@ -95,13 +74,15 @@ function Modal({
 
     return (
         <div
-            className={`fixed inset-0 overflow-y-auto h-full w-full flex items-center justify-center transition-opacity duration-300 ease-in-out ${
-                isAnimating ? 'opacity-100' : 'opacity-0'
+            className={`fixed inset-0 overflow-y-auto h-full w-full flex items-center justify-center transition-opacity duration-300 ease-out ${
+                isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
             }`}
             style={{zIndex: 1000 + level * 10}}
-            onClickCapture={handleClickOutside}>
+            onClick={handleClickOutside}>
             <div
-                className='fixed inset-0 bg-black bg-opacity-50'
+                className={`fixed inset-0 bg-black transition-opacity duration-300 ease-out ${
+                    isOpen ? 'bg-opacity-50' : 'bg-opacity-0'
+                }`}
                 style={{zIndex: 1000 + level * 10}}></div>
             <div
                 ref={modalRef}
@@ -109,10 +90,8 @@ function Modal({
                     widthClasses[width]
                 } ${
                     heightClasses[height]
-                } transform transition-all duration-300 ease-in-out ${
-                    isAnimating
-                        ? 'translate-y-0 opacity-100'
-                        : 'translate-y-10 opacity-0'
+                } transition-all duration-300 ease-out transform ${
+                    isOpen ? 'scale-100 opacity-100' : 'scale-95 opacity-0'
                 }`}
                 style={{
                     zIndex: 1001 + level * 10,