Some UX enhancements

Author: Austin-X

course-matrix/frontend/src/pages/TimetableBuilder/Calendar.tsx

@@ -227,6 +227,7 @@ const Calendar = React.memo<CalendarProps>(
     }, [timetablesData, editingTimetableId, isEditingTimetable]);
 
     const handleCreate = async () => {
+      setShowLoadingPage(true);
       const timetableTitle = timetableTitleRef.current?.value ?? "";
       // Create timetable
       const { data, error } = await createTimetable({

course-matrix/frontend/src/pages/TimetableBuilder/OfferingInfo.tsx

@@ -31,13 +31,13 @@ const OfferingInfo = ({ course, semester, form }: OfferingInfoProps) => {
 
   const lectures = offeringsData?.filter((offering: OfferingModel) =>
     offering.meeting_section.startsWith("LEC"),
-  );
+  ).sort((a: OfferingModel, b: OfferingModel) => a.meeting_section < b.meeting_section ? -1 : 1);
   const tutorials = offeringsData?.filter((offering: OfferingModel) =>
     offering.meeting_section.startsWith("TUT"),
-  );
+  ).sort((a: OfferingModel, b: OfferingModel) => a.meeting_section < b.meeting_section ? -1 : 1);
   const practicals = offeringsData?.filter((offering: OfferingModel) =>
     offering.meeting_section.startsWith("PRA"),
-  );
+  ).sort((a: OfferingModel, b: OfferingModel) => a.meeting_section < b.meeting_section ? -1 : 1);
 
   const lectureSections: string[] = [
     ...new Set(

course-matrix/frontend/src/pages/TimetableBuilder/TimetableBuilder.tsx

@@ -103,7 +103,7 @@ const TimetableBuilder = () => {
   const isEditingTimetable = queryParams.has("edit");
   const timetableId = parseInt(queryParams.get("edit") || "0");
 
-  const [showLoadingPage, setShowLoadingPage] = useState(false);
+  const [showLoadingPage, setShowLoadingPage] = useState(isEditingTimetable);
 
   const selectedCourses = form.watch("courses") || [];
   const enabledRestrictions = form.watch("restrictions") || [];
@@ -190,7 +190,6 @@ const TimetableBuilder = () => {
       form.setValue("semester", currentTimetableSemester);
       setLoadedSemester(true);
     }
-
     if (
       timetableEventsData &&
       coursesData &&
@@ -221,7 +220,6 @@ const TimetableBuilder = () => {
       );
       form.setValue("courses", existingCourses);
       setLoadedCourses(true);
-
       // Parse restrictions data (For startTime and endTime, we just care about the time, so we use the random date of 2025-01-01 so that the date can be parsed correctly)
       // We also add 1 hour (i.e. 60 * 60 * 1000 milliseconds) to the time to account for the timezone difference between the server and the client
       const parsedRestrictions = restrictionsData.map(
@@ -249,6 +247,7 @@ const TimetableBuilder = () => {
       );
       form.setValue("restrictions", parsedRestrictions);
       setLoadedRestrictions(true);
+      setShowLoadingPage(false);
     }
   }, [
     timetableEventsData,