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,
@@ -83,7 +86,6 @@ function selectModule(event: DataTableRowSelectEvent) {
 function unselectModule(event: DataTableRowUnselectEvent) {
   store.removeModule(event.data);
 }
-
 </script>
 
 <template>
@@ -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,6 +157,9 @@ function unselectModule(event: DataTableRowUnselectEvent) {
             @input="filterCallback()"
           />
         </template>
+        <template #loading>
+          <Skeleton></Skeleton>
+        </template>
       </Column>
       <Column
         field="eventType"
@@ -164,6 +175,9 @@ function unselectModule(event: DataTableRowUnselectEvent) {
             @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 
+      <Column :header="$t('additionalModules.info')">
-        :header="$t('additionalModules.info')"
-      >
         <template #body="slotProps">
           <Button
             icon="pi pi-info"
@@ -186,11 +201,16 @@ 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>

frontend/src/main.ts

@@ -32,6 +32,7 @@ import DynamicDialog from "primevue/dynamicdialog";
 import DialogService from "primevue/dialogservice";
 import ProgressSpinner from "primevue/progressspinner";
 import Checkbox from "primevue/checkbox";
+import Skeleton from "primevue/skeleton";
 import i18n from "./i18n";
 
 const app = createApp(App);
@@ -68,5 +69,6 @@ app.component("Column", Column);
 app.component("DynamicDialog", DynamicDialog);
 app.component("ProgressSpinner", ProgressSpinner);
 app.component("Checkbox", Checkbox);
+app.component("Skeleton", Skeleton);
 
 app.mount("#app");