Show "noMenteesText" for Lernbegleiter

client/src/components/learningMentor/MyMentees.vue

@@ -3,6 +3,7 @@ import { useLearningMentees } from "@/services/learningMentees";
 import { useCurrentCourseSession } from "@/composables";
 import { useCSRFFetch } from "@/fetchHelpers";
 import { computed } from "vue";
+import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
 
 const courseSession = useCurrentCourseSession();
 const { isLoading, summary, fetchData } = useLearningMentees(courseSession.value.id);
@@ -22,12 +23,14 @@ const noMenteesText = computed(() =>
 </script>
 
 <template>
-  <div v-if="summary">
-    <template v-if="summary.participants.length > 0">
+  <div v-if="isLoading" class="m-8 flex justify-center">
+    <LoadingSpinner />
+  </div>
+  <div v-else>
     <h2 class="heading-2 py-6">{{ $t("a.Personen, die du begleitest") }}</h2>
-      <div class="bg-white px-4 py-2">
+    <div v-if="(summary?.participants?.length ?? 0) > 0" class="bg-white px-4 py-2">
       <div
-          v-for="participant in summary.participants"
+        v-for="participant in summary?.participants ?? []"
         :key="participant.id"
         data-cy="lm-my-mentee-list-item"
         class="flex flex-col items-start justify-between gap-4 border-b py-2 last:border-b-0 md:flex-row md:items-center md:gap-16"
@@ -36,9 +39,7 @@ const noMenteesText = computed(() =>
           <img
             :alt="participant.last_name"
             class="h-11 w-11 rounded-full"
-              :src="
-                participant.avatar_url || '/static/avatars/myvbv-default-avatar.png'
-              "
+            :src="participant.avatar_url || '/static/avatars/myvbv-default-avatar.png'"
           />
           <div>
             <div class="text-bold">
@@ -72,13 +73,11 @@ const noMenteesText = computed(() =>
         </div>
       </div>
     </div>
-    </template>
-  </div>
-  <div v-if="!isLoading && !summary">
-    <h2 class="heading-2 py-6">{{ $t("a.Personen, die du begleitest") }}</h2>
+    <div v-else>
       <div class="flex items-center bg-white px-4 py-2">
         <it-icon-info class="it-icon mr-2 h-6 w-6" />
         {{ $t(noMenteesText) }}
       </div>
     </div>
+  </div>
 </template>