Updated the logic of the DialogContext.jsx

client/src/common/contexts/Dialog/DialogContext.jsx

@@ -7,6 +7,8 @@ import {t} from "i18next";
 export const DialogContext = createContext({});
 
 const Dialog = ({dialog, setDialog}) => {
+    if (!dialog) return;
+
     const [value, setValue] = useState(dialog.value || "");
     const ref = useRef();
 
@@ -27,24 +29,30 @@ const Dialog = ({dialog, setDialog}) => {
         setValue(e.target.value);
     }
 
+    function closeSlow() {
+        if (ref.current == null) return;
+        ref.current.classList.add("dialog-hidden");
+        setTimeout(() => setDialog(), 300);
+    }
+
     function closeDialog() {
-        setDialog();
+        closeSlow();
         if (dialog.onClose) dialog.onClose();
     }
 
     function submit() {
         if (!dialog.description && !value) return;
-        setDialog();
+        closeSlow();
         if (dialog.onSuccess) dialog.onSuccess(value);
     }
 
     function clear() {
-        setDialog();
+        closeSlow();
         if (dialog.onClear) dialog.onClear();
     }
 
     if (dialog.speedtest) return (
-        <div className="dialog-area">
+        <div className="dialog-area" ref={ref}>
             <div className="dialog dialog-speedtest">
                 <div className="lds-ellipsis">
                     <div/><div/><div/><div/>
@@ -96,7 +104,7 @@ export const DialogProvider = (props) => {
 
     return (
         <DialogContext.Provider value={[setDialog]}>
-            {dialog ? <Dialog dialog={dialog} setDialog={setDialog}/> : <></>}
+            <Dialog dialog={dialog} setDialog={setDialog}/>
             {props.children}
         </DialogContext.Provider>
     )