feature(frontend): avoid loading skeleton data if pre-existing data is avaiable (SCRUM-293) (#190)

Author: nb159

Frontend/pages/student/dashboard.vue

@@ -19,7 +19,7 @@
       >
         <CustomMessage :message="t('onboarding.completed')" type="success"/>
         <ActionCard
-            v-if="matches.length"
+            v-if="matches"
             :button-text="t('dashboard.student.startMatching')"
             card-type="primary"
             @action-button-clicked="navigate('/student/matching')"
@@ -30,16 +30,16 @@
             </h2>
             <CardStack :amount="3" @click="navigate('/student/matching')">
               <SupervisorCard
-                  :current-capacity="matches[0].availableSpots"
-                  :description="matches[0].bio"
-                  :first-name="matches[0].firstName || ''"
-                  :image="matches[0].profileImage"
-                  :last-name="matches[0].lastName || ''"
-                  :max-capacity="matches[0].totalSpots"
+                  :current-capacity="matches.availableSpots"
+                  :description="matches.bio"
+                  :first-name="matches.firstName || ''"
+                  :image="matches.profileImage"
+                  :last-name="matches.lastName || ''"
+                  :max-capacity="matches.totalSpots"
                   :similarity-score="
-                      Math.round((matches[0].compatibilityScore as number) * 100)
+                      Math.round((matches.compatibilityScore as number) * 100)
                     "
-                  :tags="matches[0].tags"
+                  :tags="matches.tags"
                   name="Hello name"
                   size="xs"
               />
@@ -172,7 +172,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
 import { useUserStore } from "~/stores/useUserStore";
 import { useSupervisorStore } from "~/stores/useSupervisorStore";
 import type { SupervisorData } from "#shared/types/supervisorInterfaces";
@@ -186,7 +185,13 @@ const userStore = useUserStore();
 const supervisorStore = useSupervisorStore();
 const studentStore = useStudentStore();
 
-const isLoading = ref(true);
+const isLoading = computed(() => {
+  return supervisorStore.supervisors.length === 0 && acceptedSupervisionRequests.value.length === 0;
+});
+
+const matches = computed(() => {
+  return supervisorStore.supervisors[0]
+});
 
 const dashboardState = computed(() => studentStore.dashboardState);
 const supervisionRequestsSentByCurrentStudent = computed(() =>
@@ -242,12 +247,9 @@ onMounted(async () => {
                 userStore.user.id
             )) as SupervisorData[];
             supervisorStore.setSupervisors(res);
-            matches.value = res;
         }
     } catch (error) {
         console.error("Error fetching supervision requests or user data:", error);
-    } finally {
-        isLoading.value = false;
     }
 });
 
@@ -272,8 +274,6 @@ watch(
     { immediate: true }
 );
 
-const matches = ref([] as SupervisorData[]);
-
 function navigate(route: string) {
   navigateTo(route);
 }

Frontend/pages/supervisor/dashboard.vue

@@ -2,7 +2,7 @@
 import { ref, watch } from "vue";
 import { useUserStore } from "~/stores/useUserStore";
 import type { UserData } from "#shared/types/userInterfaces";
-import type { SupervisorData } from "#shared/types/supervisorInterfaces";
+import type { SupervisorData, SupervisionRequestsData  } from "#shared/types/supervisorInterfaces";
 import { useSupervisionRequests } from "~/composables/useSupervisionRequests";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import EmptyPagePlaceholder from "~/components/Placeholder/EmptyPagePlaceholder.vue";
@@ -12,10 +12,13 @@ const { user } = storeToRefs(authStore)
 const { getUserByEmail } = useUserApi();
 const { getSupervisorByUserId } = useSupervisorApi();
 const userStore = useUserStore();
+const supervisorStore = useSupervisorStore();
 
-const current_user = ref<UserData | null>(null);
-const supervisor_data = ref<SupervisorData | null>(null);
 
+const current_user = ref<UserData | null>(null);
+const supervisor_data = computed(() => {
+  return supervisorStore.supervisors[0] || null;
+});
 const {
   data: pendingRequests,
 } = useSupervisionRequests("PENDING");
@@ -26,7 +29,7 @@ function navigate(route: string) {
 
 const visibleCount = ref(3);
 const visibleRequests = computed(
-    () => pendingRequests.value?.slice(0, visibleCount.value) ?? []
+    () => supervisorStore.supervisionRequests?.slice(0, visibleCount.value) ?? []
 );
 
 watch(
@@ -41,14 +44,25 @@ watch(
       current_user.value = userStore.user;
 
       if (current_user.value?.id) {
-        supervisor_data.value = (await getSupervisorByUserId(
+        const data = (await getSupervisorByUserId(
             current_user.value.id
         )) as SupervisorData;
+        supervisorStore.setSupervisors([data]);
       }
     },
     { immediate: true }
 );
 
+watch(
+  pendingRequests,
+  (newVal) => {
+    if (newVal) {
+      supervisorStore.setSupervisionRequests(newVal as SupervisionRequestsData[]);
+    }
+  },
+  { immediate: true }
+);
+
 const { t } = useI18n();
 
 definePageMeta({
@@ -69,7 +83,7 @@ definePageMeta({
           <FontAwesomeIcon icon="user-group"/>
           {{
             // this works, even though the IDE tells you it doesnt. The frontend interface types are not consitent with the backend types. Dont ask why.
-            supervisor_data?.total_spots - supervisor_data?.available_spots
+            supervisor_data.total_spots - supervisor_data?.available_spots
           }}/{{ supervisor_data?.total_spots }}
         </h2>
         <p class="text-md">