2 files changed, 37 insertions, 4 deletions

diff --git a/frontend/src/hooks/UseMessage.tsx b/frontend/src/hooks/UseMessage.tsx
index 9bfb713..13d8e4f 100644
--- a/frontend/src/hooks/UseMessage.tsx
+++ b/frontend/src/hooks/UseMessage.tsx
@@ -26,13 +26,11 @@ const useMessage = () => {
     };
 
     const MessageDialogComponent = isOpen && (
+                <div className="dialog-container">
         <MessageDialog title={title} subtitle={subtitle} onClose={handleClose}></MessageDialog>
+                </div>
     );
 
-        const getDialogComponent = () => {
-                return MessageDialogComponent;
-        };
-
     return { message, MessageDialogComponent };
 }
 
diff --git a/frontend/src/hooks/UseMessageLoad.tsx b/frontend/src/hooks/UseMessageLoad.tsx
new file mode 100644
index 0000000..defd2b3
--- /dev/null
+++ b/frontend/src/hooks/UseMessageLoad.tsx
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import MessageDialogLoad from "../components/MessageDialogLoad";
+
+const useMessageLoad = () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const [title, setTitle] = useState<string>("");
+    const [resolvePromise, setResolvePromise] = useState<(() => void) | null>(null);
+
+        const messageLoad = (title: string) => {
+        setIsOpen(true);
+        setTitle(title);
+                return new Promise((resolve) => {
+                        setResolvePromise(() => resolve);
+                });
+    };
+
+    const messageLoadClose = () => {
+        setIsOpen(false);
+        if (resolvePromise) {
+            resolvePromise();
+            setResolvePromise(null);
+        }
+    };
+
+    const MessageDialogLoadComponent = isOpen && (
+                <div className="dialog-container">
+        <MessageDialogLoad title={title} onClose={messageLoadClose}></MessageDialogLoad>
+                </div>
+    );
+
+    return { messageLoad, messageLoadClose, MessageDialogLoadComponent };
+}
+
+export default useMessageLoad;