feat: add loading skeleton to TwoPan component for improved UX

- Implemented a loading skeleton in the TwoPan component to enhance user experience during data fetching.
- Added a computed property to determine the number of skeleton rows based on pagination settings.
- Updated drawer component to use 'to' instead of 'href' for navigation links, aligning with Vue Router best practices.

Author: tacxou

apps/web/src/components/core/twopan.vue

@@ -34,6 +34,16 @@ q-splitter.fit.q-custom-splitter.absolute.q-pa-sm(
         :selected-rows-label="(numberOfRows) => `${numberOfRows} entrée(s) sélectionnée(s)`"
         dense flat binary-state-sort
       )
+        template(v-slot:loading)
+          q-inner-loading(showing color='primary')
+            .full-width.q-px-md
+              q-skeleton(
+                v-for='index in loadingSkeletonRows'
+                :key='`twopan-loading-row-${index}`'
+                type='text'
+                height='18px'
+                class='q-my-sm'
+              )
         template(v-slot:top="props")
           slot(name="before-top" v-bind="{ ...props, selected, clearSelection }")
             slot(name="before-top-left" v-bind="{ ...props, selected, clearSelection }")
@@ -234,6 +244,11 @@ export default defineNuxtComponent({
     },
   },
   computed: {
+    loadingSkeletonRows(): number {
+      const rowsPerPage = Number(this.pagination?.rowsPerPage) || 12
+
+      return Math.min(Math.max(rowsPerPage, 6), 20)
+    },
     visibleColumnsSelected(): QTableProps['visibleColumns'] {
       if (!this.visibleColumns || this.visibleColumns.length === 0) {
         return (this.columns || []).map((column) => column.name)

apps/web/src/components/layouts/default/drawer.vue

@@ -12,7 +12,7 @@ q-drawer.flex(v-model="drawer" side="left" :mini="true" :breakpoint="0" bordered
           q-item(
             clickable
             v-ripple
-            :href="encodePath(menu.path)" :active="encodePath(menu.path) === $route.fullPath"
+            :to="encodePath(menu.path)" :active="encodePath(menu.path) === $route.fullPath"
             active-class="q-item--active"
           )
             q-separator(v-if='encodePath(menu.path) === $route.fullPath' vertical color='primary' size="5px" style='position: absolute; left: 0; height: 100%; margin-top: -8px;')