From bebebd73d8b0ae58f28b9fe26694e2c8d72d1df9 Mon Sep 17 00:00:00 2001
From: jeafreezy <jolaiyaemmanuel@gmail.com>
Date: Sun, 10 Nov 2024 21:09:28 +0100
Subject: [PATCH] chore: added timeout to form state reset

---
 .../src/app/providers/models-provider.tsx     | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/providers/models-provider.tsx b/frontend/src/app/providers/models-provider.tsx
index 590a5183..beab0602 100644
--- a/frontend/src/app/providers/models-provider.tsx
+++ b/frontend/src/app/providers/models-provider.tsx
@@ -16,6 +16,7 @@ import React, {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from "react";
 import { useNavigate } from "react-router-dom";
@@ -206,11 +207,26 @@ export const ModelsProvider: React.FC<{
   ) => {
     setFormData((prev) => ({ ...prev, [field]: value }));
   };
+
+  const timeOutRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    // Cleanup the timeout on component unmount
+    return () => {
+      if (timeOutRef.current) {
+        clearTimeout(timeOutRef.current);
+      }
+    };
+  }, []);
+
   const trainingRequestMutation = useCreateModelTrainingRequest({
     mutationConfig: {
       onSuccess: () => {
         showSuccessToast(TOAST_NOTIFICATIONS.trainingRequestSubmittedSuccess);
-        setFormData(initialFormState);
+        // delay for a few seconds before resetting the state
+        timeOutRef.current = setTimeout(() => {
+          setFormData(initialFormState);
+        }, 3000);
       },
       onError: (error) => {
         showErrorToast(error);
@@ -241,6 +257,9 @@ export const ModelsProvider: React.FC<{
     mutationConfig: {
       onSuccess: (data) => {
         showSuccessToast(TOAST_NOTIFICATIONS.modelCreationSuccess);
+        navigate(
+          `${APPLICATION_ROUTES.CREATE_NEW_MODEL_CONFIRMATION}?id=${data.id}`,
+        );
         // Submit the model for training request
         trainingRequestMutation.mutate({
           model: data.id,
@@ -251,9 +270,6 @@ export const ModelsProvider: React.FC<{
           zoom_level: formData.zoomLevels,
         });
 
-        navigate(
-          `${APPLICATION_ROUTES.CREATE_NEW_MODEL_CONFIRMATION}?id=${data.id}`,
-        );
       },
       onError: (error) => {
         showErrorToast(error);