8 files changed, 100 insertions, 13 deletions

diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx
index b9e071c..4a107ad 100644
--- a/frontend/src/components/Leaderboards.tsx
+++ b/frontend/src/components/Leaderboards.tsx
@@ -34,9 +34,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ data }) => {
 
   return (
   <div>
-        <div style={{position: "absolute", width: "100%", height: "100%", top: "0px", left: "-350px"}}>
-        {MessageDialogComponent}
-        </div>
+        {MessageDialogComponent}
     <section id='section6' className='summary2'>
 
       <div id='leaderboard-top'
diff --git a/frontend/src/components/MessageDialogLoad.tsx b/frontend/src/components/MessageDialogLoad.tsx
new file mode 100644
index 0000000..381a4a4
--- /dev/null
+++ b/frontend/src/components/MessageDialogLoad.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import "../css/Dialog.css"
+
+interface MessageDialogLoadProps {
+    title: string;    
+        onClose: () => void;
+};
+
+const MessageDialogLoad: React.FC<MessageDialogLoadProps> = ({ title, onClose }) => {
+    return (
+        <div className='dimmer'>
+            <div className='dialog'>
+                <div className='dialog-element dialog-header'>
+                    <span>{title}</span>
+                </div>
+                <div className='dialog-element dialog-description'>
+                                        <div style={{display: "flex", justifyContent: "center"}}>
+                        <span className="loader"></span>
+                                        </div>
+                </div>
+                <div className='dialog-element dialog-btns-container'>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default MessageDialogLoad;
diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx
index 212a792..22b895c 100644
--- a/frontend/src/components/UploadRunDialog.tsx
+++ b/frontend/src/components/UploadRunDialog.tsx
@@ -9,6 +9,7 @@ import { API } from '../api/Api';
 import { useNavigate } from 'react-router-dom';
 import useMessage from '../hooks/UseMessage';
 import useConfirm from '../hooks/UseConfirm';
+import useMessageLoad from "../hooks/UseMessageLoad";
 
 interface UploadRunDialogProps {
   token?: string;
@@ -21,6 +22,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
 
   const { message, MessageDialogComponent } = useMessage();
   const { confirm, ConfirmDialogComponent } = useConfirm();
+  const { messageLoad, messageLoadClose, MessageDialogLoadComponent } = useMessageLoad();
 
   const navigate = useNavigate();
 
@@ -164,7 +166,9 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
         return;
       }
 
+          messageLoad("Uploading...");
       const [ success, response ] = await API.post_record(token, uploadRunContent);
+          messageLoadClose();
       await message("Upload Record", response);
       onClose(success);
           navigate("/profile");
@@ -185,6 +189,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
       <>
         <div id="upload-run-block" />
         {MessageDialogComponent}
+                {MessageDialogLoadComponent}
         {ConfirmDialogComponent}
         
         <div id='upload-run-menu'>
@@ -234,7 +239,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
                                                 </div>
                                                 : null}
 
-                                                <span>{uploadRunContent.host_demo?.name}</span>
+                                                <span className="upload-run-demo-name">{uploadRunContent.host_demo?.name}</span>
                                           </div>
                       {
                         games[selectedGameID].is_coop &&
@@ -246,13 +251,13 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
                                                         <div>
                                                         <span>Drag and drop</span>
                                                         <div>
-                                                                <span>Or click here</span><br/>
-                                                                <button>Upload</button>
+                                                                <span style={{fontFamily: "BarlowSemiCondensed-Regular"}}>Or click here</span><br/>
+                                                                <button style={{borderRadius: "24px", padding: "5px 8px", margin: "5px 0px"}}>Upload</button>
                                                         </div>
                                                         </div>
                                                         : null}
 
-                                                        <span>{uploadRunContent.partner_demo?.name}</span>
+                                                        <span className="upload-run-demo-name">{uploadRunContent.partner_demo?.name}</span>
                                                         </div>
                           </>
                         )
diff --git a/frontend/src/css/Dialog.css b/frontend/src/css/Dialog.css
index 47f070b..fc557d2 100644
--- a/frontend/src/css/Dialog.css
+++ b/frontend/src/css/Dialog.css
@@ -1,11 +1,21 @@
 .dimmer {
     position: fixed;
-    width: 100%;
+        /* WHAT A SCHTUPID ACTION */
+    width: 200%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 4;
 }
 
+.dialog-container {
+        position: absolute;
+        top: 0px;
+        left: -350px;
+        width: 100%;
+        height: 100%;
+        z-index: 10000;
+}
+
 .dialog {
     position: fixed;
     z-index: 4;
@@ -82,4 +92,4 @@
         transform: translate(-50%, calc(-50%));
         opacity: 1;
     }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/css/UploadRunDialog.css b/frontend/src/css/UploadRunDialog.css
index 737409e..f6e910b 100644
--- a/frontend/src/css/UploadRunDialog.css
+++ b/frontend/src/css/UploadRunDialog.css
@@ -74,6 +74,12 @@ div#upload-run{
     display: none;
 }
 
+.upload-run-demo-name {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 380px;
+}
+
 @keyframes dropdown-in {
     0% {
         opacity: 0;
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;
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 3dba3ae..3f26bf8 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -10,6 +10,7 @@ import "../css/Profile.css";
 import { API } from '../api/Api';
 import useConfirm from '../hooks/UseConfirm';
 import useMessage from '../hooks/UseMessage';
+import useMessageLoad from "../hooks/UseMessageLoad";
 
 interface ProfileProps {
   profile?: UserProfile;
@@ -21,6 +22,7 @@ interface ProfileProps {
 const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRecord }) => {
   const { confirm, ConfirmDialogComponent } = useConfirm();
   const { message, MessageDialogComponent } = useMessage();
+  const { messageLoad, messageLoadClose, MessageDialogLoadComponent } = useMessageLoad();
   const [navState, setNavState] = React.useState(0);
   const [pageNumber, setPageNumber] = React.useState(1);
   const [pageMax, setPageMax] = React.useState(0);
@@ -69,7 +71,10 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
       return;
     }
 
+        messageLoad("Deleting...");
+
     const api_success = await API.delete_map_record(token!, map_id, record_id);
+        messageLoadClose();
     if (api_success) {
       await message("Delete Record", "Successfully deleted record.");
       onDeleteRecord();
@@ -105,6 +110,7 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
   return (
         <div>
         {MessageDialogComponent}
+        {MessageDialogLoadComponent}
     {ConfirmDialogComponent}
 
     <main>