feat:#24 skeleton dataTable

frontend/src/components/AdditionalModuleTable.vue

@@ -1,10 +1,13 @@
 <script lang="ts" setup>
-import { defineAsyncComponent, inject, ref, Ref} from "vue";
+import { defineAsyncComponent, inject, ref, Ref } from "vue";
 import { Module } from "../model/module.ts";
 import { fetchAllModules } from "../api/fetchCourse.ts";
 import moduleStore from "../store/moduleStore.ts";
 import { FilterMatchMode } from "primevue/api";
-import { DataTableRowSelectEvent, DataTableRowUnselectEvent } from "primevue/datatable";
+import {
+  DataTableRowSelectEvent,
+  DataTableRowUnselectEvent,
+} from "primevue/datatable";
 import { useDialog } from "primevue/usedialog";
 import router from "../router";
 import { fetchModule } from "../api/fetchModule.ts";
@@ -23,7 +26,7 @@ if (store.isEmpty()) {
 }
 
 const mobilePage = inject("mobilePage") as Ref<boolean>;
-const modules: Ref<Module[]> = ref([]);
+const modules: Ref<Module[]> = ref(new Array(10));
 const filters = ref({
   course: {
     value: null,
@@ -61,15 +64,15 @@ async function showInfo(module: Module) {
   dialog.open(ModuleInformation, {
     class: "w-full m-0",
     props: {
-        style: {
-          width: "80vw",
-        },
-        breakpoints: {
-          "992px": "100vw",
-          "640px": "100vw",
-        },
-        modal: true,
+      style: {
+        width: "80vw",
       },
+      breakpoints: {
+        "992px": "100vw",
+        "640px": "100vw",
+      },
+      modal: true,
+    },
     data: {
       module: module,
     },
@@ -83,7 +86,6 @@ function selectModule(event: DataTableRowSelectEvent) {
 function unselectModule(event: DataTableRowUnselectEvent) {
   store.removeModule(event.data);
 }
-
 </script>
 
 <template>
@@ -101,10 +103,10 @@ function unselectModule(event: DataTableRowUnselectEvent) {
       paginator-template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown"
       :current-page-report-template="
         $t('additionalModules.paginator.from') +
-        '{first}' + 
-        $t('additionalModules.paginator.to') + 
-        '{last}' + 
-        $t('additionalModules.paginator.of') + 
+        '{first}' +
+        $t('additionalModules.paginator.to') +
+        '{last}' +
+        $t('additionalModules.paginator.of') +
         '{totalRecords}'
       "
       filter-display="row"
@@ -118,6 +120,9 @@ function unselectModule(event: DataTableRowUnselectEvent) {
       @row-unselect="unselectModule"
     >
       <Column selection-mode="multiple">
+        <template #loading>
+          <Skeleton></Skeleton>
+        </template>
       </Column>
 
       <Column
@@ -134,6 +139,9 @@ function unselectModule(event: DataTableRowUnselectEvent) {
             @input="filterCallback()"
           />
         </template>
+        <template #loading>
+          <Skeleton></Skeleton>
+        </template>
       </Column>
       <Column
         field="name"
@@ -149,21 +157,27 @@ function unselectModule(event: DataTableRowUnselectEvent) {
             @input="filterCallback()"
           />
         </template>
+        <template #loading>
+          <Skeleton></Skeleton>
+        </template>
       </Column>
       <Column
-          field="eventType"
-          :header="$t('additionalModules.eventType')"
-          :show-clear-button="false"
-          :show-filter-menu="false"
+        field="eventType"
+        :header="$t('additionalModules.eventType')"
+        :show-clear-button="false"
+        :show-filter-menu="false"
       >
         <template #filter="{ filterModel, filterCallback }">
           <InputText
-              v-model="filterModel.value"
-              type="text"
-              class="p-column-filter max-w-10rem"
-              @input="filterCallback()"
+            v-model="filterModel.value"
+            type="text"
+            class="p-column-filter max-w-10rem"
+            @input="filterCallback()"
           />
         </template>
+        <template #loading>
+          <Skeleton></Skeleton>
+        </template>
       </Column>
       <Column
         field="prof"
@@ -171,10 +185,11 @@ function unselectModule(event: DataTableRowUnselectEvent) {
         :show-clear-button="false"
         :show-filter-menu="false"
       >
+        <template #loading>
+          <Skeleton></Skeleton>
+        </template>
       </Column>
-      <Column 
-        :header="$t('additionalModules.info')"
-      >
+      <Column :header="$t('additionalModules.info')">
         <template #body="slotProps">
           <Button
             icon="pi pi-info"
@@ -186,12 +201,17 @@ function unselectModule(event: DataTableRowUnselectEvent) {
             @click.stop="showInfo(slotProps.data)"
           ></Button>
         </template>
+        <template #loading>
+          <Skeleton></Skeleton>
+        </template>
       </Column>
       <template #footer>
         <div class="py-2 px-3">
-          {{ 
-            t('additionalModules.footerModulesSelected', { count: store?.countModules() ?? 0 })
-          }} 
+          {{
+            t("additionalModules.footerModulesSelected", {
+              count: store?.countModules() ?? 0,
+            })
+          }}
         </div>
       </template>
     </DataTable>