added loader to training reports

ui/src/pages/TrainingReport.vue

@@ -22,6 +22,7 @@ import SelectContent from '@/components/ui/select/SelectContent.vue';
 import SelectItem from '@/components/ui/select/SelectItem.vue';
 import Input from '@/components/ui/input/Input.vue';
 import MemberCard from '@/components/members/MemberCard.vue';
+import Spinner from '@/components/ui/spinner/Spinner.vue';
 
 enum sidePanelState { view, create, closed };
 
@@ -42,6 +43,7 @@ watch(() => route.params.id, async (newID) => {
         focusedTrainingReport.value = null;
         return;
     }
+    TRLoaded.value = false;
     viewTrainingReport(Number(route.params.id));
 })
 
@@ -60,6 +62,7 @@ const focusedTrainingTrainers = computed<CourseAttendee[] | null>(() => {
 })
 async function viewTrainingReport(id: number) {
     focusedTrainingReport.value = await getTrainingReport(id);
+    TRLoaded.value = true;
 }
 
 async function closeTrainingReport() {
@@ -93,6 +96,8 @@ onMounted(async () => {
         viewTrainingReport(Number(route.params.id))
     loaded.value = true;
 })
+
+const TRLoaded = ref(false);
 </script>
 
 <template>
@@ -173,7 +178,7 @@ onMounted(async () => {
                     <X></X>
                 </button>
             </div>
-            <div class="max-h-[70vh] overflow-auto scrollbar-themed my-5">
+            <div v-if="TRLoaded" class="max-h-[70vh] overflow-auto scrollbar-themed my-5">
                 <div class="flex flex-col mb-5 border rounded-lg bg-muted/70 p-2 py-3 px-4">
                     <p class="scroll-m-20 text-xl font-semibold tracking-tight">{{ focusedTrainingReport.course_name }}
                     </p>
@@ -184,7 +189,7 @@ onMounted(async () => {
                                 :member-id="focusedTrainingReport.created_by" />
                         <p v-else>{{ focusedTrainingReport.created_by_name === null ? "Unknown User" :
                             focusedTrainingReport.created_by_name
-                        }}</p>
+                            }}</p>
                         </p>
                     </div>
                 </div>
@@ -284,6 +289,9 @@ onMounted(async () => {
                     </div>
                 </div>
             </div>
+            <div v-else class="flex w-full items-center justify-center h-[80%]">
+                <Spinner class="size-8"></Spinner>
+            </div>
         </div>
         <div v-if="sidePanel == sidePanelState.create" class="pl-7 border-l w-3/5 max-w-5xl">
             <div class="flex justify-between my-3">