fix: improve skeletons

app/src/components/globals/skeletons/AppCatalogSkeleton.vue

@@ -3,6 +3,7 @@ import { randint } from '@/helpers/commons'
 </script>
 
 <template>
+  <BSkeletonWrapper button search>
     <BInputGroup class="w-100 mb-4">
       <BInputGroupText>
         <YIcon iname="search" />
@@ -34,6 +35,7 @@ import { randint } from '@/helpers/commons'
         />
       </BCard>
     </BCardGroup>
+  </BSkeletonWrapper>
 </template>
 
 <style lang="scss" scoped>

app/src/components/globals/skeletons/BSkeleton.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-defineProps<{
-  height: string
-  width: string
-}>()
+withDefaults(defineProps<{ height?: string; width?: string }>(), {
+  height: '26px',
+  width: '100%',
+})
 </script>
 
 <template>
@@ -13,7 +13,7 @@ defineProps<{
 .b-skeleton {
   position: relative;
   overflow: hidden;
-  background-color: $gray-200;
+  background-color: var(--bs-secondary-bg);
   cursor: wait;
 
   height: $font-size-base;
@@ -22,9 +22,5 @@ defineProps<{
   @if $enable-rounded {
     border-radius: 0.25rem;
   }
-
-  [data-bs-theme='dark'] & {
-    background-color: $gray-800;
-  }
 }
 </style>

app/src/components/globals/skeletons/BSkeletonWrapper.vue

@@ -1,16 +1,96 @@
 <script setup lang="ts">
-withDefaults(defineProps<{ loading?: boolean }>(), { loading: false })
+withDefaults(defineProps<{ button: boolean; search: boolean }>(), {
+  button: false,
+  search: false,
+})
+
+const slots = defineSlots<{
+  default: any
+}>()
 </script>
 
 <template>
-  <div v-if="loading" class="b-skeleton-wrapper">
-    <slot name="loading" />
+  <div class="y-skeleton-wrapper">
+    <div class="visually-hidden">
+      <!-- FIXME add `loading` translation -->
+      {{ $t('loading') }}
+    </div>
+
+    <div v-if="search || button" id="top-bar-skeleton" class="d-flex mb-3">
+      <div id="search-skeleton" class="top-bar-group-skeleton">
+        <BInputGroup v-if="search" class="pe-none" aria-hidden="true">
+          <BInputGroupText>
+            <YIcon iname="search" />
+          </BInputGroupText>
+
+          <BFormInput :disabled="true" tabindex="-1" />
+        </BInputGroup>
+      </div>
+
+      <div v-if="button" id="button-skeleton" class="top-bar-group-skeleton">
+        <BSkeleton height="36px" class="ms-3-md" />
+      </div>
+    </div>
+
+    <slot name="default" />
   </div>
-  <slot v-else name="default" />
 </template>
 
 <style scoped lang="scss">
-.b-skeleton-wrapper {
+.y-skeleton-wrapper {
   cursor: wait;
+
+  #top-bar-skeleton {
+    flex-wrap: wrap-reverse;
+
+    .top-bar-group-skeleton {
+      margin-bottom: 1rem;
+    }
+
+    #button-skeleton {
+      width: 170px;
+    }
+
+    @include media-breakpoint-down(sm) {
+      .top-bar-group-skeleton {
+        flex-direction: column-reverse;
+      }
+      #button-skeleton {
+        width: 100%;
+      }
+    }
+
+    @include media-breakpoint-down(md) {
+      flex-direction: column-reverse;
+
+      #button-skeleton {
+        margin-bottom: 0.75rem;
+
+        :deep(> *) {
+          margin-bottom: 0.25rem;
+        }
+      }
+
+      .top-bar-group-skeleton {
+        justify-content: space-between;
+        flex-wrap: wrap;
+      }
+    }
+
+    @include media-breakpoint-up(md) {
+      #search-skeleton {
+        flex-grow: 2;
+        max-width: 50%;
+      }
+
+      #button-skeleton {
+        margin-left: auto;
+      }
+
+      :deep(.btn) {
+        margin-left: 0.5rem;
+      }
+    }
+  }
 }
 </style>

app/src/components/globals/skeletons/CardFormSkeleton.vue

@@ -2,22 +2,17 @@
 import { randint } from '@/helpers/commons'
 import type { Cols } from '@/types/commons'
 
-withDefaults(
-  defineProps<{
-    itemCount?: number
-    cols: Cols
-  }>(),
-  {
+withDefaults(defineProps<{ itemCount?: number; cols: Cols }>(), {
   itemCount: 5,
   cols: () => ({ md: 4, lg: 2 }),
-  },
-)
+})
 </script>
 
 <template>
+  <BSkeletonWrapper>
     <BCard>
       <template #header>
-      <BSkeleton width="30%" height="36px" class="m-0" />
+        <BSkeleton width="30%" height="26px" class="m-0" />
       </template>
 
       <template v-for="count in itemCount" :key="count">
@@ -53,8 +48,9 @@ withDefaults(
 
       <template #footer>
         <div class="d-flex justify-content-end w-100">
-        <BSkeleton width="100px" height="38px" />
+          <BSkeleton width="100px" height="36px" />
         </div>
       </template>
     </BCard>
+  </BSkeletonWrapper>
 </template>

app/src/components/globals/skeletons/CardInfoSkeleton.vue

@@ -5,6 +5,7 @@ withDefaults(defineProps<{ itemCount: number }>(), { itemCount: 5 })
 </script>
 
 <template>
+  <BSkeletonWrapper>
     <BCard>
       <template #header>
         <BSkeleton width="30%" height="36px" class="m-0" />
@@ -19,4 +20,5 @@ withDefaults(defineProps<{ itemCount: number }>(), { itemCount: 5 })
         </BCol>
       </BRow>
     </BCard>
+  </BSkeletonWrapper>
 </template>

app/src/components/globals/skeletons/CardListSkeleton.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import { randint } from '@/helpers/commons'
 
-withDefaults(defineProps<{ itemCount: number }>(), { itemCount: 5 })
+withDefaults(defineProps<{ itemCount: number; search: boolean }>(), {
+  itemCount: 5,
+  search: false,
+})
 </script>
 
 <template>
+  <BSkeletonWrapper :search="search">
     <BCard no-body>
       <template #header>
         <BSkeleton width="30%" height="36px" class="m-0" />
@@ -23,4 +27,5 @@ withDefaults(defineProps<{ itemCount: number }>(), { itemCount: 5 })
         </BListGroupItem>
       </BListGroup>
     </BCard>
+  </BSkeletonWrapper>
 </template>

app/src/components/globals/skeletons/ListGroupSkeleton.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
 import { randint } from '@/helpers/commons'
 
-withDefaults(defineProps<{ itemCount: number }>(), { itemCount: 5 })
+withDefaults(
+  defineProps<{ itemCount: number; button: boolean; search: boolean }>(),
+  { itemCount: 5, button: true, search: true },
+)
 </script>
 
 <template>
+  <BSkeletonWrapper :button="button" :search="search">
     <BListGroup>
       <BListGroupItem v-for="count in itemCount" :key="count">
         <BSkeleton :width="randint(15, 25) + '%'" height="24px" class="mb-2" />
         <BSkeleton :width="randint(25, 50) + '%'" height="24px" class="m-0" />
       </BListGroupItem>
     </BListGroup>
+  </BSkeletonWrapper>
 </template>

app/src/components/layouts/MainLayout.vue

@@ -77,7 +77,7 @@ const modalComponent = computed(() => {
         <Component :is="Component" :class="classes" />
         <template #fallback>
           <template v-for="({ is, ...props }, i) in skeletons" :key="i">
-            <Component :is="is" v-bind="props" />
+            <Component :is="is" v-bind="props" :class="{ 'mt-3': i !== 0 }" />
           </template>
         </template>
       </Suspense>

app/src/router/routes.ts

@@ -239,7 +239,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'services' },
       breadcrumb: ['tool-list', 'service-list'],
-      skeleton: 'ListGroupSkeleton',
+      skeleton: { is: 'ListGroupSkeleton', button: false },
     },
   },
   {
@@ -250,7 +250,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { param: 'name' },
       breadcrumb: ['tool-list', 'service-list', 'service-info'],
-      skeleton: 'CardInfoSkeleton',
+      skeleton: ['CardInfoSkeleton', 'CardInfoSkeleton'],
     },
   },
 
@@ -273,7 +273,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'logs' },
       breadcrumb: ['tool-list', 'tool-logs'],
-      skeleton: 'CardListSkeleton',
+      skeleton: { is: 'CardListSkeleton', search: true },
     },
   },
   {
@@ -284,7 +284,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { param: 'name' },
       breadcrumb: ['tool-list', 'tool-logs', 'tool-log'],
-      skeleton: 'CardInfoSkeleton',
+      skeleton: ['CardInfoSkeleton', 'CardInfoSkeleton'],
     },
   },
   {