feat : ajout loader skeleton

frontend/components/reception/reception-form.vue

@@ -1,5 +1,6 @@
 <template>
-    <form @submit.prevent="validate">
+    <skeletonForm v-if="isPageLoading"/>
+    <form v-else @submit.prevent="validate">
         <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-16">
             <h1 class="font-bold text-5xl uppercase col-start-1 row-start-1">Réception</h1>
             <!--    Nom de l'utilisateur       -->
@@ -147,6 +148,7 @@ import {RECEPTION_TYPE_CODES, SUPPLIER_CODE} from "~/utils/constants";
 import {deleteReceptionBovine, getReceptionBovineList} from "~/services/reception-bovine";
 import type {ReceptionFormData} from "~/services/dto/reception-data";
 
+const isPageLoading = ref(true)
 const router = useRouter()
 const receptionStore = useReceptionStore()
 const form = reactive<ReceptionFormData>({
@@ -329,15 +331,17 @@ const setDefaultUser = () => {
 
 // On récupère toutes les données des selects au chargement du composant
 onMounted(async () => {
-    receptionTypes.value = await getReceptionTypeList()
-    await loadUsers()
-    await loadSuppliers()
-    await loadTrucks()
-    await loadCarriers()
-    await loadDrivers()
-    await loadVehicles()
-    await authStore.ensureSession()
-    setDefaultUser()
+        receptionTypes.value = await getReceptionTypeList()
+        await loadUsers()
+        await loadSuppliers()
+        await loadTrucks()
+        await loadCarriers()
+        await loadDrivers()
+        await loadVehicles()
+        await authStore.ensureSession()
+        setDefaultUser()
+        //isPageLoading.value = false
+
 })
 
 // Ajuste driver/vehicle quand le transporteur change (logique LIOT)

frontend/components/shipment/shipment-form.vue

@@ -1,5 +1,6 @@
 <template>
-    <form @submit.prevent="validate">
+    <skeletonForm v-if="isPageLoading"/>
+    <form v-else @submit.prevent="validate">
         <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-16">
             <h1 class="font-bold text-5xl uppercase col-start-1 row-start-1">Expédition</h1>
             <!--    Nom de l'utilisateur       -->
@@ -123,7 +124,7 @@
         <div class="flex justify-center">
             <button
                 type="submit"
-                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
+                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
             >Valider
             </button>
         </div>
@@ -148,13 +149,12 @@ import type {ShipmentFormData} from '~/services/dto/shipment-data'
 import {SUPPLIER_CODE} from "~/utils/constants"
 import {useAuthStore} from '~/stores/auth'
 import {useShipmentStore} from '~/stores/shipment'
-import { computed, reactive, ref, watch, onMounted } from 'vue'
+import {computed, reactive, ref, watch, onMounted} from 'vue'
 import type {ShipmentTypeData} from "~/services/dto/shipment-type-data";
 import {getShipmentTypeList} from "~/services/shipment-type";
 import {
     createShipmentBovine,
     deleteShipmentBovine,
-    getBovinShipmentList,
     updateShipmentBovine
 } from "~/services/bovin-shipment";
 
@@ -164,7 +164,7 @@ const trucks = ref<TruckData[]>([])
 const carriers = ref<CarrierData[]>([])
 const drivers = ref<DriverData[]>([])
 const vehicles = ref<VehicleData[]>([])
-
+const isPageLoading = ref(true)
 const isLoadingUsers = ref(false)
 const isLoadingShipmentTypes = ref(false)
 const isLoadingCustomers = ref(false)
@@ -310,6 +310,7 @@ onMounted(async () => {
     await loadDrivers()
     await authStore.ensureSession()
     setDefaultUser()
+    isPageLoading.value = false
 })
 // Hydrate le formulaire depuis l'expédition en cours
 watch(

frontend/components/skeleton/skeletonForm.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-16">
+        <UiSkeletonBlock height="48px"/>
+        <div class="flex flex-col gap-2" v-for="i in 9">
+            <UiSkeletonBlock width="96px"/>
+            <UiSkeletonBlock width="100%" height="42px"/>
+        </div>
+    </div>
+    <div class="flex justify-center">
+        <UiSkeletonBlock
+            width="272px"
+            height="50px"
+        />
+    </div>
+</template>
+<script setup lang="ts">
+</script>

frontend/components/skeleton/skeletonTable.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="ps-20">
+        <UiSkeletonBlock height="48px" class="my-4"/>
+        <div class="grid grid-cols-3 justify-evenly bg-slate-100 py-4">
+            <UiSkeletonBlock v-for="i in 3"/>
+        </div>
+        <div
+            class="grid grid-cols-3 gap-4 px-4 py-4 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
+            v-for="i in 3">
+            <UiSkeletonBlock v-for="i in 3"/>
+        </div>
+    </div>
+</template>

frontend/components/ui/UiSkeletonBlock.vue

@@ -0,0 +1,22 @@
+<template>
+    <div
+        :class="['animate-pulse', rounded, customClass]"
+        :style="{ width, height, background }"
+    />
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+    width?: string
+    height?: string
+    rounded?: string
+    background?: string
+    customClass?: string
+}>(), {
+    width: '50%',
+    height: '1rem',
+    rounded: 'rounded-md',
+    background: '#e5e7eb',
+    customClass: ''
+})
+</script>