ok

src/components/Modal.js

@@ -23,6 +23,7 @@ import NotificationBlocked from "../pages/NotificationBlocked.js";
 import WelcomePageEditor from "../pages/WelcomePageEditor.js";
 import GuidePage from "../pages/GuidePage";
 import Join from "../pages/Join";
+import Loading from "../pages/Loading";
 import Login from "../pages/Login";
 import ResetPassword from "../pages/ResetPassword";
 import { getImageUrl } from "../helpers/itemHelper.js";
@@ -56,6 +57,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMove
     // Prevent click event from propagating to the overlay
     event.stopPropagation();
   };
+  if(modalContent == '') handleOverlayClick();
   return (
     <div onClick={handleOverlayClick} className={styles.modalOverlay}>
       <div className={styles.modalContent} onClick={handleContentClick}>
@@ -108,6 +110,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMove
         
         {modalContent === "join" && <Join setModal={setModal} />}
         {modalContent === "claim-coupon" && <Join setModal={setModal} />}
+        {modalContent === "loading" && <Loading setModal={setModal} />}
       </div>
     </div>
   );

src/components/Modal.module.css

@@ -18,6 +18,7 @@
   overflow: visible; /* Add this line to enable scrolling */
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 
 .closeButton {