From 1fb9ec5ba61234ad0faadd7a584aa6a6aba6e424 Mon Sep 17 00:00:00 2001
From: EwoutV <ewoutverlinde@hotmail.com>
Date: Tue, 21 May 2024 21:17:02 +0200
Subject: [PATCH] chore: cleanup

---
 backend/api/serializers/project_serializer.py |   3 +-
 frontend/src/assets/lang/app/en.json          |   1 +
 frontend/src/assets/lang/app/nl.json          |   1 +
 frontend/src/components/Loading.vue           |  12 +-
 .../src/components/courses/CourseForm.vue     |  60 +++---
 .../components/courses/ShareCourseButton.vue  |   3 +-
 .../src/components/projects/ProjectForm.vue   |  67 ++++---
 .../src/components/projects/ProjectList.vue   |   5 +-
 .../test/unit/services/group_service.test.ts  |   2 +-
 .../unit/services/setup/delete_handlers.ts    |  13 +-
 .../test/unit/services/setup/post_handlers.ts |  13 +-
 .../unit/services/structure_check.test.ts     |  11 +-
 frontend/src/test/unit/types/group.test.ts    |   2 +-
 frontend/src/test/unit/types/project.test.ts  |   2 +-
 frontend/src/types/ApiResponse.ts             |   2 +-
 frontend/src/types/Course.ts                  |   8 +-
 frontend/src/types/DockerImage.ts             |   2 +-
 frontend/src/types/ExtraCheck.ts              |   6 +-
 frontend/src/types/Faculty.ts                 |   4 +-
 frontend/src/types/FileExtension.ts           |   4 +-
 frontend/src/types/Group.ts                   |   6 +-
 frontend/src/types/Project.ts                 |  10 +-
 frontend/src/types/StructureCheck.ts          |   6 +-
 frontend/src/types/SubmisionStatus.ts         |   6 +-
 .../src/types/submission/ExtraCheckResult.ts  |   8 +-
 .../types/submission/StructureCheckResult.ts  |   8 +-
 frontend/src/types/submission/Submission.ts   |  30 ++-
 frontend/src/types/users/Student.ts           |   2 +-
 frontend/src/types/users/Teacher.ts           |   4 +-
 frontend/src/types/users/User.ts              |   2 +-
 frontend/src/views/calendar/CalendarView.vue  | 178 +++++++++---------
 frontend/src/views/courses/CourseView.vue     |   2 +-
 .../src/views/courses/CreateCourseView.vue    |  51 ++++-
 .../src/views/courses/UpdateCourseView.vue    |  61 ++++--
 .../courses/roles/AssistantCourseView.vue     |  12 +-
 .../views/courses/roles/StudentCourseView.vue |  36 ++--
 .../views/courses/roles/TeacherCourseView.vue |  12 +-
 .../roles/AssistantDashboardView.vue          | 113 ++++++-----
 .../dashboard/roles/StudentDashboardView.vue  |  67 ++++---
 .../dashboard/roles/TeacherDashboardView.vue  | 146 +++++++-------
 .../src/views/projects/CreateProjectView.vue  |  52 +++--
 .../src/views/projects/UpdateProjectView.vue  |  78 ++++----
 42 files changed, 614 insertions(+), 497 deletions(-)

diff --git a/backend/api/serializers/project_serializer.py b/backend/api/serializers/project_serializer.py
index 582a097b..afdfdce4 100644
--- a/backend/api/serializers/project_serializer.py
+++ b/backend/api/serializers/project_serializer.py
@@ -100,8 +100,7 @@ class ProjectSerializer(serializers.ModelSerializer):
     )
 
     extra_checks = serializers.HyperlinkedIdentityField(
-        view_name="project-extra-checks",
-        read_only=True
+        view_name="project-extra-checks"
     )
 
     groups = serializers.HyperlinkedIdentityField(
diff --git a/frontend/src/assets/lang/app/en.json b/frontend/src/assets/lang/app/en.json
index 5a09df76..bf9b1062 100644
--- a/frontend/src/assets/lang/app/en.json
+++ b/frontend/src/assets/lang/app/en.json
@@ -107,6 +107,7 @@
         "courses": {
             "create": "Create course",
             "edit": "Edit course",
+            "save": "Save course",
             "clone": "Clone course",
             "cloneAssistants": "Clone assistants:",
             "cloneTeachers": "Clone teachers:",
diff --git a/frontend/src/assets/lang/app/nl.json b/frontend/src/assets/lang/app/nl.json
index c9bcb259..9fc87834 100644
--- a/frontend/src/assets/lang/app/nl.json
+++ b/frontend/src/assets/lang/app/nl.json
@@ -108,6 +108,7 @@
         "courses": {
             "create": "Creëer vak",
             "edit": "Bewerk vak",
+            "save": "Vak opslaan",
             "clone": "Kloon vak",
             "cloneAssistants": "Kloon assistenten:",
             "cloneTeachers": "Kloon lesgevers:",
diff --git a/frontend/src/components/Loading.vue b/frontend/src/components/Loading.vue
index 151f7e33..eac23369 100644
--- a/frontend/src/components/Loading.vue
+++ b/frontend/src/components/Loading.vue
@@ -2,19 +2,17 @@
 import ProgressSpinner from 'primevue/progressspinner';
 import { useTimeout } from '@vueuse/core';
 
-withDefaults(defineProps<{height?:string}>(), {
-    height: '4rem'
+withDefaults(defineProps<{ height?: string }>(), {
+    height: '4rem',
 });
 
 const show = useTimeout(250);
-
 </script>
 
 <template>
-    <div :style="{minHeight: height}" class="loader w-full p-3 flex justify-content-center">
-        <ProgressSpinner stroke="blue" v-if="show"/>
+    <div :style="{ minHeight: height }" class="loader w-full p-3 flex justify-content-center">
+        <ProgressSpinner stroke="blue" v-if="show" />
     </div>
 </template>
 
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>
diff --git a/frontend/src/components/courses/CourseForm.vue b/frontend/src/components/courses/CourseForm.vue
index d9567e4d..8cf979c1 100644
--- a/frontend/src/components/courses/CourseForm.vue
+++ b/frontend/src/components/courses/CourseForm.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
 import { Course } from '@/types/Course.ts';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import { useFaculty } from '@/composables/services/faculty.service.ts';
-import { useCourses } from '@/composables/services/course.service.ts';
-import { computed, onMounted, ref } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 import { helpers, required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import Textarea from 'primevue/textarea';
@@ -14,17 +11,19 @@ import ErrorMessage from '@/components/forms/ErrorMessage.vue';
 import Button from 'primevue/button';
 import Editor from '@/components/forms/Editor.vue';
 import InputSwitch from 'primevue/inputswitch';
+import { type Faculty } from '@/types/Faculty.ts';
 
 /* Props */
 const props = defineProps<{
+    faculties: Faculty[];
     course?: Course | undefined;
 }>();
 
+/* Emits */
+const emit = defineEmits(['update:course']);
+
 /* Composable injections */
 const { t } = useI18n();
-const { push } = useRouter();
-const { faculties, getFaculties } = useFaculty();
-const { createCourse, updateCourse } = useCourses();
 
 /* State */
 const form = ref(new Course());
@@ -48,27 +47,30 @@ async function saveCourse(): Promise<void> {
 
     // Only submit the form if the validation was successful
     if (result) {
-        // Update the course if it has been provided before.
-        if (props.course !== undefined) {
-            await updateCourse(form.value);
-            await push({ name: 'course', params: { courseId: props.course.id } });
-        }
-
-        // Create a course in the other case.
-        if (props.course === undefined) {
-            await createCourse(form.value);
-            await push({ name: 'dashboard' });
-        }
+        emit('update:course', form.value);
     }
 }
 
-onMounted(async () => {
-    await getFaculties();
-
-    /* Set the form values with the existing course */
-    if (props.course !== undefined) {
-        // Convenient way of copying the course fields.
-        form.value = Course.fromJSON(props.course);
+/**
+ * Watch for changes in the course prop and update the form values.
+ */
+watchEffect(() => {
+    /* Set the form values with the existing project */
+    const course = props.course;
+
+    if (course !== undefined) {
+        form.value = new Course(
+            course.id,
+            course.name,
+            course.excerpt,
+            course.description,
+            course.academic_startyear,
+            course.private_course,
+            course.invitation_link,
+            course.invitation_link_expires,
+            course.parent_course,
+            course.faculty,
+        );
     }
 });
 </script>
@@ -120,13 +122,7 @@ onMounted(async () => {
         </div>
 
         <!-- Submit button -->
-        <Button
-            :label="course === undefined ? t('views.courses.create') : t('views.courses.edit')"
-            type="submit"
-            icon="pi pi-check"
-            iconPos="right"
-            rounded
-        />
+        <Button :label="t('views.courses.save')" type="submit" icon="pi pi-check" iconPos="right" rounded />
     </form>
 </template>
 
diff --git a/frontend/src/components/courses/ShareCourseButton.vue b/frontend/src/components/courses/ShareCourseButton.vue
index f6302fc9..74966fff 100644
--- a/frontend/src/components/courses/ShareCourseButton.vue
+++ b/frontend/src/components/courses/ShareCourseButton.vue
@@ -8,7 +8,6 @@ import { type Course } from '@/types/Course.ts';
 import { PrimeIcons } from 'primevue/api';
 import { ref, computed } from 'vue';
 import { useCourses } from '@/composables/services/course.service';
-import Editor from '@/components/forms/Editor.vue';
 
 /* Composable injections */
 const { t } = useI18n();
@@ -87,7 +86,7 @@ const invitationLink = computed(() => {
                     <div class="field col">
                         <label for="link">{{ t('views.courses.share.link') }}</label>
                         <div class="flex">
-                            <InputText v-model="invitationLink" disabled/>
+                            <InputText v-model="invitationLink" disabled />
                             <Button @click="copyToClipboard()" icon="pi pi-copy" class="p-button-text no-outline" />
                         </div>
                     </div>
diff --git a/frontend/src/components/projects/ProjectForm.vue b/frontend/src/components/projects/ProjectForm.vue
index 50be3a9f..0c66a599 100644
--- a/frontend/src/components/projects/ProjectForm.vue
+++ b/frontend/src/components/projects/ProjectForm.vue
@@ -5,7 +5,6 @@ import ErrorMessage from '@/components/forms/ErrorMessage.vue';
 import Button from 'primevue/button';
 import Editor from '@/components/forms/Editor.vue';
 import Calendar from 'primevue/calendar';
-import Skeleton from 'primevue/skeleton';
 import InputSwitch from 'primevue/inputswitch';
 import { Project } from '@/types/Project.ts';
 import { useI18n } from 'vue-i18n';
@@ -81,12 +80,22 @@ watchEffect(() => {
     const project = props.project;
 
     if (project !== undefined) {
-        form.value = Project.fromJSON(project);
-        form.value.structure_checks = [...(project.structure_checks ?? [])];
-        form.value.extra_checks = [...(project.extra_checks ?? [])];
-    } else {
-        form.value.structure_checks = [];
-        form.value.extra_checks = [];
+        form.value = new Project(
+            project.id,
+            project.name,
+            project.description,
+            project.visible,
+            project.archived,
+            project.locked_groups,
+            project.start_date,
+            project.deadline,
+            project.max_score,
+            project.score_visible,
+            project.group_size,
+        );
+
+        form.value.structure_checks = [...project.structure_checks];
+        form.value.extra_checks = [...project.extra_checks];
     }
 });
 </script>
@@ -191,41 +200,31 @@ watchEffect(() => {
 
             <div class="col-12 lg:col-6">
                 <!-- Define the submission structure checks -->
-                <template v-if="form.structure_checks !== null">
-                    <div class="grid">
-                        <div class="field col">
-                            <label for="structure">{{ t('views.projects.structureChecks') }}</label>
-                            <ProjectStructureTree id="structure" v-model="form.structure_checks" />
-                        </div>
+                <div class="grid">
+                    <div class="field col">
+                        <label for="structure">{{ t('views.projects.structureChecks') }}</label>
+                        <ProjectStructureTree id="structure" v-model="form.structure_checks" />
                     </div>
-                </template>
-                <template v-else>
-                    <Skeleton height="10rem" />
-                </template>
+                </div>
 
                 <!-- Upload field for docker script -->
-                <template v-if="form.extra_checks !== null">
-                    <div class="grid">
-                        <div class="field col">
-                            <label for="dockerScript" class="block">
-                                {{ t('views.projects.extraChecks.title') }}
-                            </label>
-                            <ExtraChecksUpload
-                                v-model="form.extra_checks"
-                                :docker-images="dockerImages"
-                                @create:docker-image="saveDockerImage"
-                            />
-                        </div>
+                <div class="grid">
+                    <div class="field col">
+                        <label for="dockerScript" class="block">
+                            {{ t('views.projects.extraChecks.title') }}
+                        </label>
+                        <ExtraChecksUpload
+                            v-model="form.extra_checks"
+                            :docker-images="dockerImages"
+                            @create:docker-image="saveDockerImage"
+                        />
                     </div>
-                </template>
-                <template v-else>
-                    <Skeleton height="10rem" />
-                </template>
+                </div>
             </div>
         </div>
 
         <!-- Submit button -->
-        <Button :label="t('views.projects.edit')" type="submit" icon="pi pi-check" iconPos="right" rounded />
+        <Button :label="t('views.projects.save')" type="submit" icon="pi pi-check" iconPos="right" rounded />
     </form>
 </template>
 
diff --git a/frontend/src/components/projects/ProjectList.vue b/frontend/src/components/projects/ProjectList.vue
index 50103ea3..ab6be293 100644
--- a/frontend/src/components/projects/ProjectList.vue
+++ b/frontend/src/components/projects/ProjectList.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import moment from 'moment';
-import Skeleton from 'primevue/skeleton';
 import InputSwitch from 'primevue/inputswitch';
 import ProjectDetailCard from '@/components/projects/ProjectDetailCard.vue';
 import ProjectDeadlineCard from '@/components/projects/ProjectDeadlineCard.vue';
@@ -110,7 +109,7 @@ const incomingProjects = computed<Project[] | null>(() => {
                             </template>
                         </template>
                         <template v-else>
-                            <Loading height="50vh"/>
+                            <Loading height="50vh" />
                         </template>
                     </div>
                 </div>
@@ -130,7 +129,7 @@ const incomingProjects = computed<Project[] | null>(() => {
                             </div>
                         </template>
                         <template v-else>
-                            <Loading height="50vh"/>
+                            <Loading height="50vh" />
                         </template>
                     </div>
                 </div>
diff --git a/frontend/src/test/unit/services/group_service.test.ts b/frontend/src/test/unit/services/group_service.test.ts
index c65789f1..9aca5d29 100644
--- a/frontend/src/test/unit/services/group_service.test.ts
+++ b/frontend/src/test/unit/services/group_service.test.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { describe, it, expect } from 'vitest';
+import { describe, it } from 'vitest';
 
 describe('placeholder', (): void => {
     it('aaaaaaaa', () => {});
diff --git a/frontend/src/test/unit/services/setup/delete_handlers.ts b/frontend/src/test/unit/services/setup/delete_handlers.ts
index 593db386..91030769 100644
--- a/frontend/src/test/unit/services/setup/delete_handlers.ts
+++ b/frontend/src/test/unit/services/setup/delete_handlers.ts
@@ -3,18 +3,7 @@
 import { HttpResponse, http } from 'msw';
 
 import { endpoints } from '@/config/endpoints.ts';
-import {
-    groups,
-    projects,
-    courses,
-    faculties,
-    students,
-    teachers,
-    assistants,
-    admins,
-    structureChecks,
-    submissions,
-} from './data';
+import { assistants, admins, structureChecks } from './data';
 
 const baseUrl = 'http://localhost';
 
diff --git a/frontend/src/test/unit/services/setup/post_handlers.ts b/frontend/src/test/unit/services/setup/post_handlers.ts
index e935501c..6fe02f4c 100644
--- a/frontend/src/test/unit/services/setup/post_handlers.ts
+++ b/frontend/src/test/unit/services/setup/post_handlers.ts
@@ -3,18 +3,7 @@
 import { HttpResponse, http } from 'msw';
 
 import { endpoints } from '@/config/endpoints.ts';
-import {
-    groups,
-    projects,
-    courses,
-    faculties,
-    students,
-    teachers,
-    assistants,
-    admins,
-    structureChecks,
-    submissions,
-} from './data';
+import { groups, projects, courses, faculties, students, assistants, admins, structureChecks } from './data';
 
 const baseUrl = 'http://localhost';
 
diff --git a/frontend/src/test/unit/services/structure_check.test.ts b/frontend/src/test/unit/services/structure_check.test.ts
index 7dcf35fc..9ef27af9 100644
--- a/frontend/src/test/unit/services/structure_check.test.ts
+++ b/frontend/src/test/unit/services/structure_check.test.ts
@@ -1,17 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { describe, it, expect } from 'vitest';
 import { useStructureCheck } from '@/composables/services/structure_check.service.ts';
-import { StructureCheck } from '@/types/StructureCheck';
 
-const {
-    structureChecks,
-    structureCheck,
-    getStructureCheckByID,
-    getStructureCheckByProject,
-
-    createStructureCheck,
-    deleteStructureCheck,
-} = useStructureCheck();
+const { structureChecks, structureCheck, getStructureCheckByID } = useStructureCheck();
 
 function resetService(): void {
     structureCheck.value = null;
diff --git a/frontend/src/test/unit/types/group.test.ts b/frontend/src/test/unit/types/group.test.ts
index 3806aa63..46bb1704 100644
--- a/frontend/src/test/unit/types/group.test.ts
+++ b/frontend/src/test/unit/types/group.test.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { describe, it, expect } from 'vitest';
+import { describe, it } from 'vitest';
 
 describe('placeholder', (): void => {
     it('aaaaaaaa', () => {});
diff --git a/frontend/src/test/unit/types/project.test.ts b/frontend/src/test/unit/types/project.test.ts
index cd5f0296..d768da1c 100644
--- a/frontend/src/test/unit/types/project.test.ts
+++ b/frontend/src/test/unit/types/project.test.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { describe, it, expect } from 'vitest';
+import { describe, it } from 'vitest';
 
 describe('placeholder', (): void => {
     it('aaaaaaaa', () => {});
diff --git a/frontend/src/types/ApiResponse.ts b/frontend/src/types/ApiResponse.ts
index c8d0ec66..a7909c3d 100644
--- a/frontend/src/types/ApiResponse.ts
+++ b/frontend/src/types/ApiResponse.ts
@@ -1 +1 @@
-export type HyperlinkedRelation = string;
\ No newline at end of file
+export type HyperlinkedRelation = string;
diff --git a/frontend/src/types/Course.ts b/frontend/src/types/Course.ts
index ffc1817e..13934cab 100644
--- a/frontend/src/types/Course.ts
+++ b/frontend/src/types/Course.ts
@@ -2,10 +2,10 @@ import { type Assistant } from './users/Assistant.ts';
 import { type Project } from './Project.ts';
 import { type Student } from './users/Student.ts';
 import { type Teacher } from './users/Teacher.ts';
-import { Faculty, FacultyJSON } from '@/types/Faculty.ts';
-import { HyperlinkedRelation } from '@/types/ApiResponse.ts';
+import { Faculty, type FacultyJSON } from '@/types/Faculty.ts';
+import { type HyperlinkedRelation } from '@/types/ApiResponse.ts';
 
-export type CourseJSON = {
+export interface CourseJSON {
     id: string;
     name: string;
     academic_startyear: number;
@@ -81,7 +81,7 @@ export class Course {
      * @param course
      */
     static fromJSON(course: CourseJSON): Course {
-        let parent: CourseJSON|Course|null = course.parent_course;
+        let parent: CourseJSON | Course | null = course.parent_course;
 
         if (parent !== null) {
             parent = Course.fromJSON(parent);
diff --git a/frontend/src/types/DockerImage.ts b/frontend/src/types/DockerImage.ts
index 42f9aec8..3190879b 100644
--- a/frontend/src/types/DockerImage.ts
+++ b/frontend/src/types/DockerImage.ts
@@ -1,4 +1,4 @@
-export type DockerImageJSON = {
+export interface DockerImageJSON {
     id: string;
     name: string;
     file: string;
diff --git a/frontend/src/types/ExtraCheck.ts b/frontend/src/types/ExtraCheck.ts
index b5c59ba1..c6b7c73e 100644
--- a/frontend/src/types/ExtraCheck.ts
+++ b/frontend/src/types/ExtraCheck.ts
@@ -1,7 +1,7 @@
 import { DockerImage } from './DockerImage';
-import { HyperlinkedRelation } from '@/types/ApiResponse.ts';
+import { type HyperlinkedRelation } from '@/types/ApiResponse.ts';
 
-export type ExtraCheckJSON = {
+export interface ExtraCheckJSON {
     id: string;
     name: string;
     file: string;
@@ -21,7 +21,7 @@ export class ExtraCheck {
         public time_limit: number = 30,
         public memory_limit: number = 128,
         public show_log: boolean = true,
-        public docker_image: DockerImage = new DockerImage()
+        public docker_image: DockerImage = new DockerImage(),
     ) {}
 
     /**
diff --git a/frontend/src/types/Faculty.ts b/frontend/src/types/Faculty.ts
index 895f7b53..310618a9 100644
--- a/frontend/src/types/Faculty.ts
+++ b/frontend/src/types/Faculty.ts
@@ -1,7 +1,7 @@
-export type FacultyJSON = {
+export interface FacultyJSON {
     id: string;
     name: string;
-};
+}
 
 export class Faculty {
     constructor(
diff --git a/frontend/src/types/FileExtension.ts b/frontend/src/types/FileExtension.ts
index 4a1b03d7..fe0f96b1 100644
--- a/frontend/src/types/FileExtension.ts
+++ b/frontend/src/types/FileExtension.ts
@@ -1,7 +1,7 @@
-export type FileExtensionJSON = {
+export interface FileExtensionJSON {
     id: string;
     extension: string;
-};
+}
 
 export class FileExtension {
     constructor(
diff --git a/frontend/src/types/Group.ts b/frontend/src/types/Group.ts
index 7bd60ad6..d5f1e78f 100644
--- a/frontend/src/types/Group.ts
+++ b/frontend/src/types/Group.ts
@@ -1,9 +1,9 @@
-import { Project, ProjectJSON } from './Project.ts';
+import { Project, type ProjectJSON } from './Project.ts';
 import { type Student } from './users/Student.ts';
 import { type Submission } from './submission/Submission.ts';
-import { HyperlinkedRelation } from '@/types/ApiResponse.ts';
+import { type HyperlinkedRelation } from '@/types/ApiResponse.ts';
 
-export type GroupJSON = {
+export interface GroupJSON {
     id: string;
     score: number;
     project: ProjectJSON;
diff --git a/frontend/src/types/Project.ts b/frontend/src/types/Project.ts
index ad8bc769..d84c685a 100644
--- a/frontend/src/types/Project.ts
+++ b/frontend/src/types/Project.ts
@@ -1,13 +1,13 @@
 import moment from 'moment';
-import { Course, CourseJSON } from './Course.ts';
+import { Course, type CourseJSON } from './Course.ts';
 import { type ExtraCheck } from './ExtraCheck.ts';
 import { type Group } from './Group.ts';
 import { type StructureCheck } from './StructureCheck.ts';
 import { type Submission } from './submission/Submission.ts';
-import { SubmissionStatus, SubmissionStatusJSON } from '@/types/SubmisionStatus.ts';
-import { HyperlinkedRelation } from '@/types/ApiResponse.ts';
+import { SubmissionStatus, type SubmissionStatusJSON } from '@/types/SubmisionStatus.ts';
+import { type HyperlinkedRelation } from '@/types/ApiResponse.ts';
 
-export type ProjectJSON = {
+export interface ProjectJSON {
     id: string;
     name: string;
     description: string;
@@ -25,7 +25,7 @@ export type ProjectJSON = {
     extra_checks: HyperlinkedRelation;
     groups: HyperlinkedRelation;
     submissions: HyperlinkedRelation;
-};
+}
 
 export class Project {
     constructor(
diff --git a/frontend/src/types/StructureCheck.ts b/frontend/src/types/StructureCheck.ts
index ba6fc63b..83533010 100644
--- a/frontend/src/types/StructureCheck.ts
+++ b/frontend/src/types/StructureCheck.ts
@@ -1,8 +1,8 @@
-import { FileExtension, FileExtensionJSON } from './FileExtension.ts';
+import { FileExtension, type FileExtensionJSON } from './FileExtension.ts';
 import { Project } from './Project.ts';
-import { HyperlinkedRelation } from '@/types/ApiResponse.ts';
+import { type HyperlinkedRelation } from '@/types/ApiResponse.ts';
 
-export type StructureCheckJSON = {
+export interface StructureCheckJSON {
     id: string;
     path: string;
     project: HyperlinkedRelation;
diff --git a/frontend/src/types/SubmisionStatus.ts b/frontend/src/types/SubmisionStatus.ts
index e20f5925..3cbb4913 100644
--- a/frontend/src/types/SubmisionStatus.ts
+++ b/frontend/src/types/SubmisionStatus.ts
@@ -1,4 +1,4 @@
-export type SubmissionStatusJSON = {
+export interface SubmissionStatusJSON {
     non_empty_groups: number;
     groups_submitted: number;
     structure_checks_passed: number;
@@ -10,7 +10,7 @@ export class SubmissionStatus {
         public non_empty_groups: number = 0,
         public groups_submitted: number = 0,
         public structure_checks_passed: number = 0,
-        public extra_checks_passed: number = 0
+        public extra_checks_passed: number = 0,
     ) {}
 
     /**
@@ -23,7 +23,7 @@ export class SubmissionStatus {
             submissionStatus.non_empty_groups,
             submissionStatus.groups_submitted,
             submissionStatus.structure_checks_passed,
-            submissionStatus.extra_checks_passed
+            submissionStatus.extra_checks_passed,
         );
     }
 }
diff --git a/frontend/src/types/submission/ExtraCheckResult.ts b/frontend/src/types/submission/ExtraCheckResult.ts
index 104801c6..930ca1ab 100644
--- a/frontend/src/types/submission/ExtraCheckResult.ts
+++ b/frontend/src/types/submission/ExtraCheckResult.ts
@@ -1,11 +1,11 @@
 import { Submission } from '@/types/submission/Submission.ts';
 import { ExtraCheck } from '@/types/ExtraCheck.ts';
-import { HyperlinkedRelation } from '@/types/ApiResponse.ts';
+import { type HyperlinkedRelation } from '@/types/ApiResponse.ts';
 
-export type ExtraCheckResultJSON = {
+export interface ExtraCheckResultJSON {
     id: string;
     result: string;
-    error_message: string|null;
+    error_message: string | null;
     submission: number;
     structure_check: number;
     resourcetype: string;
@@ -17,7 +17,7 @@ export class ExtraCheckResult {
     constructor(
         public id: string = '',
         public result: string = '',
-        public error_message: string|null = null,
+        public error_message: string | null = null,
         public resourcetype: string = '',
         public submission: Submission = new Submission(),
         public extra_check: ExtraCheck = new ExtraCheck(),
diff --git a/frontend/src/types/submission/StructureCheckResult.ts b/frontend/src/types/submission/StructureCheckResult.ts
index cc09d910..c8e6e9f0 100644
--- a/frontend/src/types/submission/StructureCheckResult.ts
+++ b/frontend/src/types/submission/StructureCheckResult.ts
@@ -1,11 +1,11 @@
-import { HyperlinkedRelation } from '@/types/ApiResponse.ts';
+import { type HyperlinkedRelation } from '@/types/ApiResponse.ts';
 import { StructureCheck } from '@/types/StructureCheck.ts';
 import { Submission } from '@/types/submission/Submission.ts';
 
-export type StructureCheckResultJSON = {
+export interface StructureCheckResultJSON {
     id: string;
     result: string;
-    error_message: string|null;
+    error_message: string | null;
     submission: number;
     structure_check: number;
     resourcetype: string;
@@ -17,7 +17,7 @@ export class StructureCheckResult {
     constructor(
         public id: string = '',
         public result: string = '',
-        public error_message: string|null = null,
+        public error_message: string | null = null,
         public resourcetype: string = '',
         public submission: Submission = new Submission(),
         public structure_check: StructureCheck = new StructureCheck(),
diff --git a/frontend/src/types/submission/Submission.ts b/frontend/src/types/submission/Submission.ts
index 8293dccb..205938f1 100644
--- a/frontend/src/types/submission/Submission.ts
+++ b/frontend/src/types/submission/Submission.ts
@@ -1,14 +1,15 @@
-import { ExtraCheckResult } from '@/types/submission/ExtraCheckResult.ts';
-import { StructureCheckResult } from '@/types/submission/StructureCheckResult.ts';
-import { HyperlinkedRelation } from '@/types/ApiResponse.ts';
+import { ExtraCheckResult, type ExtraCheckResultJSON } from '@/types/submission/ExtraCheckResult.ts';
+import { StructureCheckResult, type StructureCheckResultJSON } from '@/types/submission/StructureCheckResult.ts';
+import { type HyperlinkedRelation } from '@/types/ApiResponse.ts';
 
-export type SubmissionJSON = {
+export interface SubmissionJSON {
     id: string;
     submission_number: number;
     submission_time: string;
     is_valid: boolean;
     zip: HyperlinkedRelation;
     group: HyperlinkedRelation;
+    results: Array<ExtraCheckResultJSON | StructureCheckResultJSON>;
 }
 
 export class Submission {
@@ -19,7 +20,7 @@ export class Submission {
         public is_valid: boolean = false,
         public extraCheckResults: ExtraCheckResult[] = [],
         public structureCheckResults: StructureCheckResult[] = [],
-        public zip: File|null = null,
+        public zip: File | null = null,
     ) {}
 
     /**
@@ -60,11 +61,26 @@ export class Submission {
      * @param submission
      */
     static fromJSON(submission: SubmissionJSON): Submission {
+        const extraCheckResults = submission.results
+            .filter(
+                (result: ExtraCheckResultJSON | StructureCheckResultJSON) => result.resourcetype === 'ExtraCheckResult',
+            )
+            .map((result: any) => ExtraCheckResult.fromJSON(result as ExtraCheckResultJSON));
+
+        const structureCheckResults = submission.results
+            .filter(
+                (result: ExtraCheckResultJSON | StructureCheckResultJSON) =>
+                    result.resourcetype === 'StructureCheckResult',
+            )
+            .map((result: any) => StructureCheckResult.fromJSON(result as StructureCheckResultJSON));
+
         return new Submission(
             submission.id,
             submission.submission_number,
             new Date(submission.submission_time),
-            submission.is_valid
+            submission.is_valid,
+            extraCheckResults,
+            structureCheckResults,
         );
     }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/types/users/Student.ts b/frontend/src/types/users/Student.ts
index ba9fe7ca..22e96339 100644
--- a/frontend/src/types/users/Student.ts
+++ b/frontend/src/types/users/Student.ts
@@ -1,7 +1,7 @@
 import { type Course } from '../Course.ts';
 import { type Faculty } from '../Faculty.ts';
 import { type Group } from '../Group.ts';
-import { type Role, User, UserJSON } from '@/types/users/User.ts';
+import { type Role, User, type UserJSON } from '@/types/users/User.ts';
 
 export type StudentJSON = {
     student_id: string;
diff --git a/frontend/src/types/users/Teacher.ts b/frontend/src/types/users/Teacher.ts
index 778c6d2e..ad44441b 100644
--- a/frontend/src/types/users/Teacher.ts
+++ b/frontend/src/types/users/Teacher.ts
@@ -1,7 +1,7 @@
 import { type Course } from '../Course.ts';
 import { type Faculty } from '../Faculty.ts';
-import { type Role, User, UserJSON } from '@/types/users/User.ts';
-import { HyperlinkedRelation } from '@/types/ApiResponse.ts';
+import { type Role, User, type UserJSON } from '@/types/users/User.ts';
+import { type HyperlinkedRelation } from '@/types/ApiResponse.ts';
 
 export type TeacherJSON = {
     courses: HyperlinkedRelation;
diff --git a/frontend/src/types/users/User.ts b/frontend/src/types/users/User.ts
index e22cfb7f..dd7b8596 100644
--- a/frontend/src/types/users/User.ts
+++ b/frontend/src/types/users/User.ts
@@ -3,7 +3,7 @@ import { type Faculty } from '../Faculty.ts';
 export const roles: string[] = ['user', 'student', 'assistant', 'teacher'];
 export type Role = (typeof roles)[number];
 
-export type UserJSON = {
+export interface UserJSON {
     id: string;
     first_name: string;
     last_name: string;
diff --git a/frontend/src/views/calendar/CalendarView.vue b/frontend/src/views/calendar/CalendarView.vue
index 0491f34c..55440ed0 100644
--- a/frontend/src/views/calendar/CalendarView.vue
+++ b/frontend/src/views/calendar/CalendarView.vue
@@ -15,20 +15,22 @@ import { useRoute, useRouter } from 'vue-router';
 import { useCourses } from '@/composables/services/course.service.ts';
 import { type Course, getAcademicYear } from '@/types/Course.ts';
 import Loading from '@/components/Loading.vue';
+import { watchImmediate } from '@vueuse/core';
 
 /* Composable injections */
 const { t, locale } = useI18n();
 const { query } = useRoute();
 const { push } = useRouter();
 
-/* Component state */
-const selectedDate = ref<Date>(getQueryDate());
-
 /* Service injection */
 const { user } = storeToRefs(useAuthStore());
 const { courses, getCoursesByTeacher, getCourseByAssistant } = useCourses();
 const { projects, getProjectsByTeacher, getProjectsByAssistant, getProjectsByStudent } = useProject();
 
+/* Component state */
+const loading = ref(true);
+const selectedDate = ref<Date>(getQueryDate());
+
 /* Formatted date */
 const formattedDate = computed(() => {
     // Format the selected date using moment.js
@@ -147,14 +149,13 @@ function countDeadlines(date: CalendarDateSlotOptions): number {
 }
 
 /* Watch the user and load the projects */
-watch(
-    user,
-    async () => {
-        await loadProjects();
-    },
-    { immediate: true },
-);
+watchImmediate(user, async () => {
+    loading.value = true;
+    await loadProjects();
+    loading.value = false;
+});
 
+/* Watch the selected date and update the query parameters */
 watch(selectedDate, (date) => {
     push({ query: { date: moment(date).format('YYYY-MM-DD') } });
 });
@@ -164,96 +165,101 @@ watch(selectedDate, (date) => {
     <BaseLayout>
         <!-- Calendar heading -->
         <Title class="mb-6">{{ t('views.calendar.title') }}</Title>
-        <!-- Calendar body -->
-        <div class="grid">
-            <div class="col-12 md:col-6">
-                <div>
-                    <!-- Calendar itself -->
-                    <Calendar class="w-full" v-model="selectedDate" inline>
-                        <template #date="{ date }">
-                            <div class="relative">
-                                <div class="deadline-indicator" v-if="hasDeadline(date)">
-                                    {{ countDeadlines(date) }}
+        <template v-if="!loading">
+            <!-- Calendar body -->
+            <div class="grid fadein">
+                <div class="col-12 md:col-6">
+                    <div>
+                        <!-- Calendar itself -->
+                        <Calendar class="w-full" v-model="selectedDate" inline>
+                            <template #date="{ date }">
+                                <div class="relative">
+                                    <div class="deadline-indicator" v-if="hasDeadline(date)">
+                                        {{ countDeadlines(date) }}
+                                    </div>
+                                    <span>{{ date.day }}</span>
                                 </div>
-                                <span>{{ date.day }}</span>
-                            </div>
-                        </template>
-                    </Calendar>
+                            </template>
+                        </Calendar>
+                    </div>
                 </div>
-            </div>
-            <div class="col-12 md:col-6">
-                <div class="surface-100 p-4 md:p-6">
-                    <!-- Selected date on the calendar -->
-                    <Title class="mb-6 font-extrabold">
-                        {{ formattedDate }}
-                    </Title>
+                <div class="col-12 md:col-6">
+                    <div class="surface-100 p-4 md:p-6">
+                        <!-- Selected date on the calendar -->
+                        <Title class="mb-6 font-extrabold">
+                            {{ formattedDate }}
+                        </Title>
 
-                    <!-- Listing projects with given deadline -->
-                    <div class="flex flex-column gap-4">
-                        <template v-if="projectsWithDeadline !== null">
-                            <template v-if="projectsWithDeadline.length > 0">
-                                <!-- Project cards -->
-                                <div
-                                    class="flex flex-column xl:flex-row border-round-md"
-                                    v-for="project in projectsWithDeadline"
-                                    :key="project.id"
-                                >
-                                    <!-- Icon -->
-                                    <div
-                                        class="bg-primary flex justify-content-center align-items-center p-4 xl:w-7rem xl:h-7rem"
-                                    >
-                                        <span class="pi pi-book text-6xl" />
-                                    </div>
-                                    <!-- Details -->
+                        <!-- Listing projects with given deadline -->
+                        <div class="flex flex-column gap-4">
+                            <template v-if="projectsWithDeadline !== null">
+                                <template v-if="projectsWithDeadline.length > 0">
+                                    <!-- Project cards -->
                                     <div
-                                        class="flex flex-column gap-3 justify-content-center bg-white text-black-alpha-80 p-3 w-full"
+                                        class="flex flex-column xl:flex-row border-round-md"
+                                        v-for="project in projectsWithDeadline"
+                                        :key="project.id"
                                     >
-                                        <RouterLink
-                                            :to="{
-                                                name: 'course-project',
-                                                params: {
-                                                    courseId: project.course?.id,
-                                                    projectId: project.id,
-                                                },
-                                            }"
+                                        <!-- Icon -->
+                                        <div
+                                            class="bg-primary flex justify-content-center align-items-center p-4 xl:w-7rem xl:h-7rem"
                                         >
-                                            <h3 class="flex gap-3 align-items-center text-primary m-0 text-xl">
-                                                {{ project.name }} <span class="pi pi-arrow-right text-xl" />
-                                            </h3>
-                                        </RouterLink>
-                                        <p class="font-bold m-0">
-                                            {{ project.course?.name }}
-                                        </p>
+                                            <span class="pi pi-book text-6xl" />
+                                        </div>
+                                        <!-- Details -->
+                                        <div
+                                            class="flex flex-column gap-3 justify-content-center bg-white text-black-alpha-80 p-3 w-full"
+                                        >
+                                            <RouterLink
+                                                :to="{
+                                                    name: 'course-project',
+                                                    params: {
+                                                        courseId: project.course?.id,
+                                                        projectId: project.id,
+                                                    },
+                                                }"
+                                            >
+                                                <h3 class="flex gap-3 align-items-center text-primary m-0 text-xl">
+                                                    {{ project.name }} <span class="pi pi-arrow-right text-xl" />
+                                                </h3>
+                                            </RouterLink>
+                                            <p class="font-bold m-0">
+                                                {{ project.course?.name }}
+                                            </p>
+                                        </div>
                                     </div>
-                                </div>
+                                </template>
+                                <template v-else>
+                                    <p class="m-0">{{ t('views.calendar.noProjects') }}</p>
+                                </template>
                             </template>
                             <template v-else>
-                                <p class="m-0">{{ t('views.calendar.noProjects') }}</p>
+                                <Loading height="7rem" />
                             </template>
-                        </template>
-                        <template v-else>
-                            <Loading height="7rem"/>
+                        </div>
+
+                        <template
+                            v-if="
+                                currentCourses !== null &&
+                                (user?.isTeacher() || user?.isAssistant()) &&
+                                currentCourses.length > 0
+                            "
+                        >
+                            <!-- Add project button -->
+                            <ProjectCreateButton
+                                class="mt-5"
+                                :label="t('components.button.createProject')"
+                                severity="secondary"
+                                :courses="currentCourses"
+                            />
                         </template>
                     </div>
-
-                    <template
-                        v-if="
-                            currentCourses !== null &&
-                            (user?.isTeacher() || user?.isAssistant()) &&
-                            currentCourses.length > 0
-                        "
-                    >
-                        <!-- Add project button -->
-                        <ProjectCreateButton
-                            class="mt-5"
-                            :label="t('components.button.createProject')"
-                            severity="secondary"
-                            :courses="currentCourses"
-                        />
-                    </template>
                 </div>
             </div>
-        </div>
+        </template>
+        <template v-else>
+            <Loading height="45vh" />
+        </template>
     </BaseLayout>
 </template>
 
diff --git a/frontend/src/views/courses/CourseView.vue b/frontend/src/views/courses/CourseView.vue
index ff2c8be2..7efcfbc9 100644
--- a/frontend/src/views/courses/CourseView.vue
+++ b/frontend/src/views/courses/CourseView.vue
@@ -58,7 +58,7 @@ onMounted(async () => {
             </div>
         </template>
         <template v-else>
-            <Loading height="100vh"/>
+            <Loading height="100vh" />
         </template>
     </BaseLayout>
 </template>
diff --git a/frontend/src/views/courses/CreateCourseView.vue b/frontend/src/views/courses/CreateCourseView.vue
index 707e256a..abfd0be5 100644
--- a/frontend/src/views/courses/CreateCourseView.vue
+++ b/frontend/src/views/courses/CreateCourseView.vue
@@ -2,23 +2,58 @@
 import CourseForm from '@/components/courses/CourseForm.vue';
 import Title from '@/components/layout/Title.vue';
 import BaseLayout from '@/components/layout/base/BaseLayout.vue';
+import Loading from '@/components/Loading.vue';
 import { useI18n } from 'vue-i18n';
+import { onMounted, ref } from 'vue';
+import { useFaculty } from '@/composables/services/faculty.service.ts';
+import { type Course } from '@/types/Course.ts';
+import { useCourses } from '@/composables/services/course.service.ts';
+import { useRouter } from 'vue-router';
 
 /* Composable injections */
 const { t } = useI18n();
+const { push } = useRouter();
+const { faculties, getFaculties } = useFaculty();
+const { createCourse } = useCourses();
+
+/* State */
+const loading = ref(true);
+
+/**
+ * Save the course.
+ *
+ * @param course
+ */
+async function saveCourse(course: Course): Promise<void> {
+    await createCourse(course);
+    await push({ name: 'dashboard' });
+}
+
+/** Load the data */
+onMounted(async () => {
+    loading.value = true;
+    await getFaculties();
+    loading.value = false;
+});
 </script>
 
 <template>
     <BaseLayout>
-        <div class="grid fadein">
-            <div class="col-12 md:col-6">
-                <!-- Create course heading -->
-                <Title class="mb-6">{{ t('views.courses.create') }}</Title>
-
-                <!-- Course form -->
-                <CourseForm />
+        <!-- Create course heading -->
+        <Title class="mb-6">{{ t('views.courses.create') }}</Title>
+        <template v-if="!loading">
+            <div class="grid fadein">
+                <div class="col-12 md:col-6">
+                    <!-- Course form -->
+                    <template v-if="faculties !== null">
+                        <CourseForm :faculties="faculties" @update:course="saveCourse" />
+                    </template>
+                </div>
             </div>
-        </div>
+        </template>
+        <template v-else>
+            <Loading height="70vh" />
+        </template>
     </BaseLayout>
 </template>
 
diff --git a/frontend/src/views/courses/UpdateCourseView.vue b/frontend/src/views/courses/UpdateCourseView.vue
index 496b6ab2..fa1f44ea 100644
--- a/frontend/src/views/courses/UpdateCourseView.vue
+++ b/frontend/src/views/courses/UpdateCourseView.vue
@@ -1,35 +1,64 @@
 <script setup lang="ts">
 import BaseLayout from '@/components/layout/base/BaseLayout.vue';
 import CourseForm from '@/components/courses/CourseForm.vue';
-import Skeleton from 'primevue/skeleton';
 import Title from '@/components/layout/Title.vue';
-import { onMounted } from 'vue';
-import { useRoute } from 'vue-router';
+import Loading from '@/components/Loading.vue';
+import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useCourses } from '@/composables/services/course.service';
+import { useFaculty } from '@/composables/services/faculty.service.ts';
+import { type Course } from '@/types/Course.ts';
+import { watchImmediate } from '@vueuse/core';
 
 /* Composable injections */
 const { t } = useI18n();
 const { params } = useRoute();
-const { course, getCourseByID } = useCourses();
+const { push } = useRouter();
+const { faculties, getFaculties } = useFaculty();
+const { course, getCourseByID, updateCourse } = useCourses();
+
+/* State */
+const loading = ref(true);
+
+/**
+ * Save the course.
+ *
+ * @param course
+ */
+async function saveCourse(course: Course): Promise<void> {
+    await updateCourse(course);
+    await push({ name: 'course', params: { courseId: course.id } });
+}
 
 /* Load course data */
-onMounted(async () => {
-    await getCourseByID(params.courseId as string);
-});
+watchImmediate(
+    () => params.courseId.toString(),
+    async (courseId: string): Promise<void> => {
+        loading.value = true;
+        await getCourseByID(courseId);
+        await getFaculties();
+        loading.value = false;
+    },
+);
 </script>
 
 <template>
     <BaseLayout>
-        <div class="grid fadein">
-            <div class="col-12 md:col-6">
-                <!-- Create course heading -->
-                <Title class="mb-6">{{ t('views.courses.edit') }}</Title>
-
-                <!-- Course form -->
-                <CourseForm :course="course" v-if="course !== null" />
-                <Skeleton height="100rem" v-else />
+        <!-- Create course heading -->
+        <Title class="mb-6">{{ t('views.courses.edit') }}</Title>
+        <template v-if="!loading">
+            <div class="grid fadein">
+                <div class="col-12 md:col-6">
+                    <!-- Course form -->
+                    <template v-if="course !== null && faculties !== null">
+                        <CourseForm :course="course" :faculties="faculties" @update:course="saveCourse" />
+                    </template>
+                </div>
             </div>
-        </div>
+        </template>
+        <template v-else>
+            <Loading height="70vh" />
+        </template>
     </BaseLayout>
 </template>
diff --git a/frontend/src/views/courses/roles/AssistantCourseView.vue b/frontend/src/views/courses/roles/AssistantCourseView.vue
index 01c5956a..4b513b01 100644
--- a/frontend/src/views/courses/roles/AssistantCourseView.vue
+++ b/frontend/src/views/courses/roles/AssistantCourseView.vue
@@ -5,8 +5,9 @@ import TeacherAssistantList from '@/components/teachers_assistants/TeacherAssist
 import ProjectCreateButton from '@/components/projects/ProjectCreateButton.vue';
 import { type Course } from '@/types/Course.ts';
 import { useI18n } from 'vue-i18n';
-import { computed, watchEffect } from 'vue';
+import { computed } from 'vue';
 import { useProject } from '@/composables/services/project.service.ts';
+import { watchImmediate } from '@vueuse/core';
 
 /* Props */
 const props = defineProps<{
@@ -23,9 +24,12 @@ const instructors = computed(() => {
 });
 
 /* Fetch projects when the course changes */
-watchEffect(async () => {
-    await getProjectsByCourse(props.course.id);
-});
+watchImmediate(
+    () => props.course.id,
+    async (courseId: string) => {
+        await getProjectsByCourse(courseId);
+    },
+);
 </script>
 
 <template>
diff --git a/frontend/src/views/courses/roles/StudentCourseView.vue b/frontend/src/views/courses/roles/StudentCourseView.vue
index be47b060..8de95c12 100644
--- a/frontend/src/views/courses/roles/StudentCourseView.vue
+++ b/frontend/src/views/courses/roles/StudentCourseView.vue
@@ -12,7 +12,8 @@ import { useAuthStore } from '@/store/authentication.store.ts';
 import { storeToRefs } from 'pinia';
 import { useRouter } from 'vue-router';
 import { useProject } from '@/composables/services/project.service.ts';
-import { computed, watch, watchEffect } from 'vue';
+import { computed } from 'vue';
+import { watchImmediate } from '@vueuse/core';
 
 /* Props */
 const props = defineProps<{
@@ -43,17 +44,19 @@ async function leaveCourse(): Promise<void> {
     confirm.require({
         message: t('confirmations.leaveCourse'),
         header: t('views.courses.leave'),
-        accept: async (): Promise<void> => {
-            if (user.value !== null) {
-                // Leave the course
-                await studentLeaveCourse(props.course.id, user.value.id);
-
-                // Refresh the user so the course is removed from the user's courses
-                await refreshUser();
-
-                // Redirect to the dashboard
-                await push({ name: 'dashboard' });
-            }
+        accept: () => {
+            (async () => {
+                if (user.value !== null) {
+                    // Leave the course
+                    await studentLeaveCourse(props.course.id, user.value.id);
+
+                    // Refresh the user so the course is removed from the user's courses
+                    await refreshUser();
+
+                    // Redirect to the dashboard
+                    await push({ name: 'dashboard' });
+                }
+            })();
         },
         reject: () => {},
     });
@@ -62,9 +65,12 @@ async function leaveCourse(): Promise<void> {
 /**
  * Watch for changes in the course ID and fetch the projects for the course.
  */
-watchEffect(async () => {
-    await getProjectsByCourse(props.course.id);
-});
+watchImmediate(
+    () => props.course.id,
+    async (courseId: string) => {
+        await getProjectsByCourse(courseId);
+    },
+);
 </script>
 
 <template>
diff --git a/frontend/src/views/courses/roles/TeacherCourseView.vue b/frontend/src/views/courses/roles/TeacherCourseView.vue
index b900d156..7e36c30f 100644
--- a/frontend/src/views/courses/roles/TeacherCourseView.vue
+++ b/frontend/src/views/courses/roles/TeacherCourseView.vue
@@ -16,7 +16,8 @@ import { RouterLink } from 'vue-router';
 import { PrimeIcons } from 'primevue/api';
 import { useCourses } from '@/composables/services/course.service';
 import { useProject } from '@/composables/services/project.service.ts';
-import { computed, ref, watch, watchEffect } from 'vue';
+import { computed, ref } from 'vue';
+import { watchImmediate } from '@vueuse/core';
 
 /* Props */
 const props = defineProps<{
@@ -56,9 +57,12 @@ async function handleClone(): Promise<void> {
 /**
  * Watch for changes in the course ID and fetch the projects for the course.
  */
-watchEffect(async () => {
-    await getProjectsByCourse(props.course.id);
-});
+watchImmediate(
+    () => props.course.id,
+    async (courseId: string) => {
+        await getProjectsByCourse(courseId);
+    },
+);
 </script>
 
 <template>
diff --git a/frontend/src/views/dashboard/roles/AssistantDashboardView.vue b/frontend/src/views/dashboard/roles/AssistantDashboardView.vue
index 591adbcc..e58fc3db 100644
--- a/frontend/src/views/dashboard/roles/AssistantDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/AssistantDashboardView.vue
@@ -5,12 +5,14 @@ import CourseList from '@/components/courses/CourseDetailList.vue';
 import ProjectList from '@/components/projects/ProjectList.vue';
 import ProjectCreateButton from '@/components/projects/ProjectCreateButton.vue';
 import { useI18n } from 'vue-i18n';
-import { computed, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import { useCourses } from '@/composables/services/course.service.ts';
 import { type Assistant } from '@/types/users/Assistant';
 import { getAcademicYear, getAcademicYears } from '@/types/Course.ts';
 import { useProject } from '@/composables/services/project.service.ts';
 import Button from 'primevue/button';
+import Loading from '@/components/Loading.vue';
+import { watchImmediate } from '@vueuse/core';
 
 /* Props */
 const props = defineProps<{
@@ -23,6 +25,8 @@ const { projects, getProjectsByAssistant } = useProject();
 const { courses, getCourseByAssistant } = useCourses();
 
 /* State */
+const loading = ref(true);
+
 const selectedYear = ref(getAcademicYear());
 const allYears = computed(() => getAcademicYears(...(courses.value?.map((course) => course.academic_startyear) ?? [])));
 
@@ -31,66 +35,71 @@ const filteredCourses = computed(
 );
 
 /* Watchers */
-watch(
-    props.assistant,
-    () => {
-        getCourseByAssistant(props.assistant.id);
-        getProjectsByAssistant(props.assistant.id);
-    },
-    {
-        immediate: true,
+watchImmediate(
+    () => props.assistant,
+    async (assistant: Assistant) => {
+        await getCourseByAssistant(assistant.id);
+        await getProjectsByAssistant(assistant.id);
+        loading.value = false;
     },
 );
 </script>
 
 <template>
-    <!-- Project heading -->
-    <div class="flex justify-content-between align-items-center mb-6">
-        <!-- Project list title -->
-        <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
+    <template v-if="!loading">
+        <div class="fadein">
+            <!-- Project heading -->
+            <div class="flex justify-content-between align-items-center mb-6">
+                <!-- Project list title -->
+                <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
 
-        <!-- Add project button -->
-        <ProjectCreateButton :courses="filteredCourses" />
-    </div>
-    <!-- Project list body -->
-    <ProjectList :projects="projects">
-        <template #empty>
-            <template v-if="filteredCourses.length === 0">
-                <p>{{ t('components.list.noCourses.teacher') }}</p>
-                <RouterLink :to="{ name: 'course-create' }">
-                    <Button :label="t('components.button.createCourse')" icon="pi pi-plus" />
-                </RouterLink>
-            </template>
-            <template v-else>
-                <p>
-                    {{ t('components.list.noProjects.teacher') }}
-                </p>
+                <!-- Add project button -->
+                <ProjectCreateButton :courses="filteredCourses" />
+            </div>
+            <!-- Project list body -->
+            <ProjectList :projects="projects">
+                <template #empty>
+                    <template v-if="filteredCourses.length === 0">
+                        <p>{{ t('components.list.noCourses.teacher') }}</p>
+                        <RouterLink :to="{ name: 'course-create' }">
+                            <Button :label="t('components.button.createCourse')" icon="pi pi-plus" />
+                        </RouterLink>
+                    </template>
+                    <template v-else>
+                        <p>
+                            {{ t('components.list.noProjects.teacher') }}
+                        </p>
 
-                <p v-if="filteredCourses.length === 0">
-                    {{ t('components.list.noCourses.teacher') }}
-                </p>
+                        <p v-if="filteredCourses.length === 0">
+                            {{ t('components.list.noCourses.teacher') }}
+                        </p>
 
-                <ProjectCreateButton :courses="filteredCourses" :label="t('components.button.createProject')" />
-            </template>
-        </template>
-    </ProjectList>
-    <!-- Course heading -->
-    <div class="flex justify-content-between align-items-center my-6">
-        <!-- Course list title -->
-        <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
+                        <ProjectCreateButton :courses="filteredCourses" :label="t('components.button.createProject')" />
+                    </template>
+                </template>
+            </ProjectList>
+            <!-- Course heading -->
+            <div class="flex justify-content-between align-items-center my-6">
+                <!-- Course list title -->
+                <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
 
-        <!-- Academic year selector -->
-        <YearSelector :years="allYears" v-model="selectedYear" />
-    </div>
-    <!-- Course list body -->
-    <CourseList :courses="filteredCourses">
-        <template #empty>
-            <p>{{ t('components.list.noCourses.teacher') }}</p>
-            <RouterLink :to="{ name: 'course-create' }">
-                <Button :label="t('components.button.createCourse')" icon="pi pi-plus" />
-            </RouterLink>
-        </template>
-    </CourseList>
+                <!-- Academic year selector -->
+                <YearSelector :years="allYears" v-model="selectedYear" />
+            </div>
+            <!-- Course list body -->
+            <CourseList :courses="filteredCourses">
+                <template #empty>
+                    <p>{{ t('components.list.noCourses.teacher') }}</p>
+                    <RouterLink :to="{ name: 'course-create' }">
+                        <Button :label="t('components.button.createCourse')" icon="pi pi-plus" />
+                    </RouterLink>
+                </template>
+            </CourseList>
+        </div>
+    </template>
+    <template v-else>
+        <Loading height="70vh" />
+    </template>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/frontend/src/views/dashboard/roles/StudentDashboardView.vue b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
index 4435e774..11a29f6b 100644
--- a/frontend/src/views/dashboard/roles/StudentDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
@@ -3,12 +3,14 @@ import Title from '@/components/layout/Title.vue';
 import YearSelector from '@/components/YearSelector.vue';
 import CourseList from '@/components/courses/CourseDetailList.vue';
 import ProjectList from '@/components/projects/ProjectList.vue';
+import Loading from '@/components/Loading.vue';
 import { type Student } from '@/types/users/Student.ts';
 import { useI18n } from 'vue-i18n';
-import { computed, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import { useCourses } from '@/composables/services/course.service.ts';
 import { getAcademicYear, getAcademicYears } from '@/types/Course.ts';
 import { useProject } from '@/composables/services/project.service.ts';
+import { watchImmediate } from '@vueuse/core';
 
 /* Props */
 const props = defineProps<{
@@ -21,6 +23,8 @@ const { projects, getProjectsByStudent } = useProject();
 const { courses, getCoursesByStudent } = useCourses();
 
 /* State */
+const loading = ref(true);
+
 const selectedYear = ref(getAcademicYear());
 const allYears = computed(() => getAcademicYears(...(courses.value?.map((course) => course.academic_startyear) ?? [])));
 
@@ -31,39 +35,46 @@ const filteredCourses = computed(
 const visibleProjects = computed(() => projects.value?.filter((project) => project.visible) ?? null);
 
 /* Watchers */
-watch(
-    props.student,
-    () => {
-        getCoursesByStudent(props.student.id);
-        getProjectsByStudent(props.student.id);
-    },
-    {
-        immediate: true,
+watchImmediate(
+    () => props.student,
+    async (student: Student) => {
+        loading.value = true;
+        await getCoursesByStudent(student.id);
+        await getProjectsByStudent(student.id);
+        loading.value = false;
     },
 );
 </script>
 
 <template>
-    <!-- Project heading -->
-    <div class="flex justify-content-between align-items-center mb-6">
-        <!-- Project list title -->
-        <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
-    </div>
-
-    <!-- Project list body -->
-    <ProjectList class="fadein" :projects="visibleProjects" />
-    <!-- Course heading -->
-    <div
-        class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center my-6"
-    >
-        <!-- Course list title -->
-        <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
+    <template v-if="!loading">
+        <div class="fadein">
+            <!-- Project heading -->
+            <div
+                class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center mb-6"
+            >
+                <!-- Project list title -->
+                <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
+            </div>
+            <!-- Project list body -->
+            <ProjectList class="fadein" :projects="visibleProjects" />
+            <!-- Course heading -->
+            <div
+                class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center my-6"
+            >
+                <!-- Course list title -->
+                <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
 
-        <!-- Academic year selector -->
-        <YearSelector :years="allYears" v-model="selectedYear" />
-    </div>
-    <!-- Course list body -->
-    <CourseList class="fadein" :courses="filteredCourses" />
+                <!-- Academic year selector -->
+                <YearSelector :years="allYears" v-model="selectedYear" />
+            </div>
+            <!-- Course list body -->
+            <CourseList class="fadein" :courses="filteredCourses" />
+        </div>
+    </template>
+    <template v-else>
+        <Loading height="70vh" />
+    </template>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
index 4060ce70..6f0faf55 100644
--- a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
@@ -6,13 +6,15 @@ import YearSelector from '@/components/YearSelector.vue';
 import CourseList from '@/components/courses/CourseDetailList.vue';
 import ProjectList from '@/components/projects/ProjectList.vue';
 import ProjectCreateButton from '@/components/projects/ProjectCreateButton.vue';
+import Loading from '@/components/Loading.vue';
 import { type Teacher } from '@/types/users/Teacher';
 import { PrimeIcons } from 'primevue/api';
 import { useI18n } from 'vue-i18n';
-import { computed, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import { useCourses } from '@/composables/services/course.service.ts';
 import { getAcademicYear, getAcademicYears } from '@/types/Course.ts';
 import { useProject } from '@/composables/services/project.service.ts';
+import { watchImmediate } from '@vueuse/core';
 
 /* Props */
 const props = defineProps<{
@@ -25,6 +27,8 @@ const { projects, getProjectsByTeacher } = useProject();
 const { courses, getCoursesByTeacher } = useCourses();
 
 /* State */
+const loading = ref(true);
+
 const selectedYear = ref(getAcademicYear());
 const allYears = computed(() => getAcademicYears(...(courses.value?.map((course) => course.academic_startyear) ?? [])));
 
@@ -33,82 +37,88 @@ const filteredCourses = computed(
 );
 
 /* Watchers */
-watch(
-    props.teacher,
-    () => {
-        getCoursesByTeacher(props.teacher.id);
-        getProjectsByTeacher(props.teacher.id);
-    },
-    {
-        immediate: true,
+watchImmediate(
+    () => props.teacher,
+    async (teacher: Teacher) => {
+        loading.value = true;
+        await getCoursesByTeacher(teacher.id);
+        await getProjectsByTeacher(teacher.id);
+        loading.value = false;
     },
 );
 </script>
 
 <template>
-    <!-- Project heading -->
-    <div
-        class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center mb-6"
-    >
-        <!-- Project list title -->
-        <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
+    <template v-if="!loading">
+        <div class="fadein">
+            <!-- Project heading -->
+            <div
+                class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center mb-6"
+            >
+                <!-- Project list title -->
+                <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
 
-        <!-- Create project button -->
-        <ProjectCreateButton :courses="filteredCourses" :label="t('components.button.createProject')" />
-    </div>
-    <!-- Project list body -->
-    <ProjectList :projects="projects">
-        <template #empty>
-            <template v-if="filteredCourses.length === 0">
-                <p>{{ t('components.list.noCourses.teacher') }}</p>
-                <RouterLink :to="{ name: 'course-create' }">
-                    <Button :label="t('components.button.createCourse')" icon="pi pi-plus" />
-                </RouterLink>
-            </template>
-            <template v-else>
-                <p>
-                    {{ t('components.list.noProjects.teacher') }}
-                </p>
+                <!-- Create project button -->
+                <ProjectCreateButton :courses="filteredCourses" :label="t('components.button.createProject')" />
+            </div>
+            <!-- Project list body -->
+            <ProjectList :projects="projects">
+                <template #empty>
+                    <template v-if="filteredCourses.length === 0">
+                        <p>{{ t('components.list.noCourses.teacher') }}</p>
+                        <RouterLink :to="{ name: 'course-create' }">
+                            <Button :label="t('components.button.createCourse')" icon="pi pi-plus" />
+                        </RouterLink>
+                    </template>
+                    <template v-else>
+                        <p>
+                            {{ t('components.list.noProjects.teacher') }}
+                        </p>
 
-                <p v-if="filteredCourses.length === 0">
-                    {{ t('components.list.noCourses.teacher') }}
-                </p>
+                        <p v-if="filteredCourses.length === 0">
+                            {{ t('components.list.noCourses.teacher') }}
+                        </p>
 
-                <ProjectCreateButton :courses="filteredCourses" :label="t('components.button.createProject')" />
-            </template>
-        </template>
-    </ProjectList>
-    <!-- Course heading -->
-    <div
-        class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center my-6"
-    >
-        <!-- Course list title -->
-        <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
-        <!-- Course list controls -->
-        <ButtonGroup class="flex align-items-center">
-            <!-- Academic year selector -->
-            <YearSelector :years="allYears" v-model="selectedYear" />
+                        <ProjectCreateButton :courses="filteredCourses" :label="t('components.button.createProject')" />
+                    </template>
+                </template>
+            </ProjectList>
+            <!-- Course heading -->
+            <div
+                class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center my-6"
+            >
+                <!-- Course list title -->
+                <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
+                <!-- Course list controls -->
+                <ButtonGroup class="flex align-items-center">
+                    <!-- Academic year selector -->
+                    <YearSelector :years="allYears" v-model="selectedYear" />
 
-            <!-- Create course button -->
-            <RouterLink :to="{ name: 'course-create' }">
-                <Button
-                    :icon="PrimeIcons.PLUS"
-                    icon-pos="right"
-                    class="custom-button"
-                    style="height: 51px; width: 51px"
-                />
-            </RouterLink>
-        </ButtonGroup>
-    </div>
-    <!-- Course list body -->
-    <CourseList :courses="filteredCourses">
-        <template #empty>
-            <p>{{ t('components.list.noCourses.teacher') }}</p>
-            <RouterLink :to="{ name: 'course-create' }">
-                <Button :label="t('components.button.createCourse')" icon="pi pi-plus" />
-            </RouterLink>
-        </template>
-    </CourseList>
+                    <!-- Create course button -->
+                    <RouterLink :to="{ name: 'course-create' }">
+                        <Button
+                            :icon="PrimeIcons.PLUS"
+                            icon-pos="right"
+                            class="custom-button"
+                            style="height: 51px; width: 51px"
+                        />
+                    </RouterLink>
+                </ButtonGroup>
+            </div>
+            <!-- Course list body -->
+            <CourseList :courses="filteredCourses">
+                <template #empty>
+                    <p>{{ t('components.list.noCourses.teacher') }}</p>
+                    <RouterLink :to="{ name: 'course-create' }">
+                        <Button :label="t('components.button.createCourse')" icon="pi pi-plus" />
+                    </RouterLink>
+                </template>
+            </CourseList>
+        </div>
+    </template>
+    <template v-else>
+        <Loading height="70vh" />
+    </template>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index 1f5c902c..314880e4 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import BaseLayout from '@/components/layout/base/BaseLayout.vue';
 import Title from '@/components/layout/Title.vue';
-import { onMounted } from 'vue';
+import { ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useCourses } from '@/composables/services/course.service';
@@ -14,6 +14,8 @@ import { useMessagesStore } from '@/store/messages.store.ts';
 import { useDockerImages } from '@/composables/services/docker.service.ts';
 import { type DockerImage } from '@/types/DockerImage.ts';
 import { useExtraCheck } from '@/composables/services/extra_checks.service.ts';
+import Loading from '@/components/Loading.vue';
+import { watchImmediate } from '@vueuse/core';
 
 /* Composable injections */
 const { t } = useI18n();
@@ -28,6 +30,9 @@ const { setStructureChecks } = useStructureCheck();
 const { setExtraChecks } = useExtraCheck();
 const { dockerImages, getDockerImages, createDockerImage } = useDockerImages();
 
+/* State */
+const loading = ref(true);
+
 /**
  * Save the project.
  *
@@ -71,14 +76,19 @@ async function saveDockerImage(dockerImage: DockerImage, file: File): Promise<vo
 }
 
 /* Load course data */
-onMounted(async () => {
-    try {
-        await getCourseByID(params.courseId as string);
-        await getDockerImages();
-    } catch (error: any) {
-        processError(error);
-    }
-});
+watchImmediate(
+    () => params.courseId.toString(),
+    async (courseId: string) => {
+        loading.value = true;
+        try {
+            await getCourseByID(courseId);
+            await getDockerImages();
+        } catch (error: any) {
+            processError(error);
+        }
+        loading.value = false;
+    },
+);
 </script>
 
 <template>
@@ -87,15 +97,21 @@ onMounted(async () => {
         <Title class="mb-6">
             {{ t('views.projects.create') }}
         </Title>
-
-        <!-- Project form -->
-        <template v-if="dockerImages !== null && course !== null">
-            <ProjectForm
-                :course="course"
-                :docker-images="dockerImages"
-                @update:project="(project, numberOfGroups) => saveProject(project, numberOfGroups)"
-                @create:docker-image="saveDockerImage"
-            />
+        <template v-if="!loading">
+            <div class="fadein">
+                <!-- Project form -->
+                <template v-if="dockerImages !== null && course !== null">
+                    <ProjectForm
+                        :course="course"
+                        :docker-images="dockerImages"
+                        @update:project="(project, numberOfGroups) => saveProject(project, numberOfGroups)"
+                        @create:docker-image="saveDockerImage"
+                    />
+                </template>
+            </div>
+        </template>
+        <template v-else>
+            <Loading height="70vh" />
         </template>
     </BaseLayout>
 </template>
diff --git a/frontend/src/views/projects/UpdateProjectView.vue b/frontend/src/views/projects/UpdateProjectView.vue
index 7ce381dc..6d7dadf4 100644
--- a/frontend/src/views/projects/UpdateProjectView.vue
+++ b/frontend/src/views/projects/UpdateProjectView.vue
@@ -3,7 +3,7 @@ import BaseLayout from '@/components/layout/base/BaseLayout.vue';
 import Title from '@/components/layout/Title.vue';
 import ProjectForm from '@/components/projects/ProjectForm.vue';
 import Loading from '@/components/Loading.vue';
-import { onMounted, ref } from 'vue';
+import { ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useProject } from '@/composables/services/project.service';
@@ -15,6 +15,7 @@ import { useDockerImages } from '@/composables/services/docker.service.ts';
 import { useExtraCheck } from '@/composables/services/extra_checks.service.ts';
 import { type DockerImage } from '@/types/DockerImage.ts';
 import { type ExtraCheck } from '@/types/ExtraCheck.ts';
+import { watchImmediate } from '@vueuse/core';
 
 /* Composable injections */
 const { t } = useI18n();
@@ -29,7 +30,7 @@ const { extraChecks, setExtraChecks, deleteExtraCheck, getExtraChecksByProject }
 const { dockerImages, getDockerImages, createDockerImage } = useDockerImages();
 
 /* State */
-const isLoading = ref(true);
+const loading = ref(true);
 
 /**
  * Save the project.
@@ -92,51 +93,60 @@ async function saveDockerImage(dockerImage: DockerImage, file: File): Promise<vo
 }
 
 /* Load project data */
-onMounted(async () => {
-    try {
-        await getProjectByID(params.projectId as string);
-        await getDockerImages();
+watchImmediate(
+    () => params.projectId,
+    async () => {
+        loading.value = true;
 
-        if (project.value !== null) {
-            await getStructureCheckByProject(project.value.id);
+        try {
+            await getProjectByID(params.projectId.toString());
+            await getDockerImages();
 
-            if (structureChecks.value !== null) {
-                project.value.structure_checks = structureChecks.value;
-            }
+            if (project.value !== null) {
+                await getStructureCheckByProject(project.value.id);
 
-            await getExtraChecksByProject(project.value.id);
+                if (structureChecks.value !== null) {
+                    project.value.structure_checks = structureChecks.value;
+                }
 
-            if (extraChecks.value !== null) {
-                project.value.extra_checks = extraChecks.value;
+                await getExtraChecksByProject(project.value.id);
+
+                if (extraChecks.value !== null) {
+                    project.value.extra_checks = extraChecks.value;
+                }
             }
+        } catch (error: any) {
+            processError(error);
         }
 
-        isLoading.value = false;
-    } catch (error: any) {
-        processError(error);
-    }
-});
+        loading.value = false;
+    },
+);
 </script>
 
 <template>
     <BaseLayout>
-        <!-- Update project heading -->
-        <Title class="mb-6">
-            {{ t('views.projects.edit') }}
-        </Title>
-
-        <!-- Project form -->
-        <template v-if="project !== null && dockerImages !== null && !isLoading">
-            <ProjectForm
-                :course="project.course"
-                :project="project"
-                :docker-images="dockerImages"
-                @create:docker-image="saveDockerImage"
-                @update:project="saveProject"
-            />
+        <template v-if="!loading">
+            <div class="fadein">
+                <!-- Update project heading -->
+                <Title class="mb-6">
+                    {{ t('views.projects.edit') }}
+                </Title>
+
+                <!-- Project form -->
+                <template v-if="project !== null && dockerImages !== null">
+                    <ProjectForm
+                        :course="project.course"
+                        :project="project"
+                        :docker-images="dockerImages"
+                        @create:docker-image="saveDockerImage"
+                        @update:project="saveProject"
+                    />
+                </template>
+            </div>
         </template>
         <template v-else>
-            <Loading />
+            <Loading height="70vh" />
         </template>
     </BaseLayout>
 </template>