diff --git a/client/src/Pages/CourseForm.jsx b/client/src/Pages/CourseForm.jsx index 06229e6..0d3ede6 100644 --- a/client/src/Pages/CourseForm.jsx +++ b/client/src/Pages/CourseForm.jsx @@ -40,6 +40,9 @@ const CourseForm = () => { const [errors, setErrors] = useState({}); + // State to check if the form is currently submitting + const [loading, setLoading] = useState(false); + useEffect(() => { const fetchOptionsAndFaculties = async () => { try { @@ -72,11 +75,11 @@ const CourseForm = () => { const handleAddFaculty = (field) => { if (!formData[field]) return; - + const selectedFaculty = options.faculties.find( (faculty) => faculty.name === formData[field] ); - + if (selectedFaculty) { setTempAssignments((prev) => ({ ...prev, @@ -85,7 +88,6 @@ const CourseForm = () => { setFormData({ ...formData, [field]: "" }); } }; - const handleRemoveFaculty = (field, index) => { setTempAssignments((prev) => { @@ -139,6 +141,10 @@ const CourseForm = () => { }); const payload = Object.values(groupedTasks); + + // Start loading so user knows it is saving + setLoading(true); + await saveAppointment(payload); // await updateCourseStatus(course?.courseId || id); @@ -152,6 +158,8 @@ const CourseForm = () => { }); } catch (error) { console.error("Failed to save appointment:", error); + // If error comes, stop the loading + setLoading(false); } } }; @@ -343,13 +351,15 @@ const CourseForm = () => { type="submit" className="courseFormButton" style={{ gridColumn: "1 / -1" }} + disabled={loading} // Disable button when loading > - Submit + {/* Change text based on loading state */} + {loading ? "Saving..." : "Submit"} -