feat: add more complex skeleton definitions

app/overrides.d.ts

@@ -1,3 +1,4 @@
+import type { Skeleton } from '@/types/commons'
 import 'vue-router'
 
 declare module 'vue-router' {
@@ -6,6 +7,7 @@ declare module 'vue-router' {
     routerParams?: string[]
     args: { trad?: string; param?: string }
     breadcrumb?: string[]
+    skeleton?: (Skeleton | string)[] | Skeleton | string
   }
 }
 

app/src/components/layouts/MainLayout.vue

@@ -13,7 +13,7 @@ import {
 import { useInfos } from '@/composables/useInfos'
 import { useRequests } from '@/composables/useRequests'
 import { useSettings } from '@/composables/useSettings'
-import type { VueClass } from '@/types/commons'
+import type { Skeleton, VueClass } from '@/types/commons'
 
 const router = useRouter()
 const { routerKey } = useInfos()
@@ -25,9 +25,13 @@ const RootView = createReusableTemplate<{
   classes: VueClass
 }>()
 
-const skeleton = computed(
-  () => router.currentRoute.value.meta.skeleton || 'CardInfoSkeleton',
-)
+const skeletons = computed<Skeleton[]>(() => {
+  const skeleton = router.currentRoute.value.meta.skeleton ?? 'CardInfoSkeleton'
+  const skeletons = Array.isArray(skeleton) ? skeleton : [skeleton]
+  return skeletons.map((skeleton) =>
+    typeof skeleton === 'string' ? { is: skeleton } : skeleton,
+  )
+})
 
 const modalComponent = computed(() => {
   if (reconnecting.value) {
@@ -72,7 +76,9 @@ const modalComponent = computed(() => {
       <Suspense>
         <Component :is="Component" :class="classes" />
         <template #fallback>
-          <Component :is="skeleton" />
+          <template v-for="({ is, ...props }, i) in skeletons" :key="i">
+            <Component :is="is" v-bind="props" />
+          </template>
         </template>
       </Suspense>
 

app/src/types/commons.ts

@@ -18,6 +18,7 @@ export type Cols = Partial<Record<Breakpoint, boolean | ColsNumbers | 'auto'>>
 
 // CUSTOM
 
+export type Skeleton = { is: string } & Obj
 export type CustomRoute = {
   to: RouteLocationNamedRaw
   text: string