Merge pull request #1416 from transformerlab/fix/closing-queue-task-modal

Close QueueTaskModal only when provider launch request returns

Author: deep1401

src/renderer/components/Experiment/Tasks/QueueTaskModal.tsx

@@ -103,6 +103,42 @@ export default function QueueTaskModal({
   );
   const [sweepMetric, setSweepMetric] = React.useState('eval/loss');
   const [lowerIsBetter, setLowerIsBetter] = React.useState(true);
+  const loadingMessages = React.useMemo(
+    () => [
+      'Contacting compute provider…',
+      'Reserving resources…',
+      'Preparing environment…',
+      'Submitting job configuration…',
+      'Waiting for job ID…',
+    ],
+    [],
+  );
+  const [loadingMessageIndex, setLoadingMessageIndex] = React.useState(0);
+
+  React.useEffect(() => {
+    if (!open || !isSubmitting || loadingMessages.length === 0) {
+      return;
+    }
+
+    // Reset to first message whenever a new submission starts
+    setLoadingMessageIndex(0);
+
+    const interval = window.setInterval(() => {
+      setLoadingMessageIndex((prev) => {
+        const lastIndex = loadingMessages.length - 1;
+        // Once we reach the final message ("Waiting for job ID…"),
+        // stay there instead of looping back to the beginning.
+        if (prev >= lastIndex) {
+          return lastIndex;
+        }
+        return prev + 1;
+      });
+    }, 1500);
+
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [open, isSubmitting, loadingMessages]);
 
   // Fetch available models and datasets from the API
   const { data: modelsData } = useSWR(
@@ -1170,6 +1206,11 @@ export default function QueueTaskModal({
           >
             Submit
           </Button>
+          {isSubmitting && (
+            <Typography level="body-sm" sx={{ ml: 1 }}>
+              {loadingMessages[loadingMessageIndex]}
+            </Typography>
+          )}
         </DialogActions>
       </ModalDialog>
     </Modal>

src/renderer/components/Experiment/Tasks/Tasks.tsx

@@ -844,8 +844,7 @@ export default function Tasks({ subtype }: { subtype?: string }) {
   const handleQueueSubmit = async (config: Record<string, any>) => {
     if (!experimentInfo?.id || !taskBeingQueued) return;
 
-    // Close modal and start submission
-    setQueueModalOpen(false);
+    // Keep modal open while submission is in progress
     setIsSubmitting(true);
 
     const task = taskBeingQueued;
@@ -968,7 +967,10 @@ export default function Tasks({ subtype }: { subtype?: string }) {
           type: 'success',
           message: 'Provider cluster launch initiated.',
         });
+        setQueueModalOpen(false);
         await Promise.all([jobsMutate(), templatesMutate()]);
+        // Close the queue modal only after the launch succeeds
+        setTaskBeingQueued(null);
       } else {
         // FastAPI HTTPException uses 'detail' field, but some responses may use 'message'
         const message =
@@ -988,6 +990,9 @@ export default function Tasks({ subtype }: { subtype?: string }) {
       });
     } finally {
       setIsSubmitting(false);
+      // Ensure the queue modal closes when the launch request finishes,
+      // regardless of success or failure.
+      setQueueModalOpen(false);
       setTaskBeingQueued(null);
     }
   };