From 42e97c749a17cec522955600fef4fcc6b89cb043 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 16 Aug 2024 00:24:39 +0200
Subject: [PATCH] fix: improve skeletons

---
 .../globals/skeletons/AppCatalogSkeleton.vue  | 56 ++++++------
 .../globals/skeletons/BSkeleton.vue           | 14 ++-
 .../globals/skeletons/BSkeletonWrapper.vue    | 90 +++++++++++++++++--
 .../globals/skeletons/CardFormSkeleton.vue    | 86 +++++++++---------
 .../globals/skeletons/CardInfoSkeleton.vue    | 28 +++---
 .../globals/skeletons/CardListSkeleton.vue    | 41 +++++----
 .../globals/skeletons/ListGroupSkeleton.vue   | 19 ++--
 app/src/components/layouts/MainLayout.vue     |  2 +-
 app/src/router/routes.ts                      |  8 +-
 9 files changed, 215 insertions(+), 129 deletions(-)

diff --git a/app/src/components/globals/skeletons/AppCatalogSkeleton.vue b/app/src/components/globals/skeletons/AppCatalogSkeleton.vue
index 06792016..9bc44bd9 100644
--- a/app/src/components/globals/skeletons/AppCatalogSkeleton.vue
+++ b/app/src/components/globals/skeletons/AppCatalogSkeleton.vue
@@ -3,37 +3,39 @@ import { randint } from '@/helpers/commons'
 </script>
 
 <template>
-  <BInputGroup class="w-100 mb-4">
-    <BInputGroupText>
-      <YIcon iname="search" />
-    </BInputGroupText>
+  <BSkeletonWrapper button search>
+    <BInputGroup class="w-100 mb-4">
+      <BInputGroupText>
+        <YIcon iname="search" />
+      </BInputGroupText>
 
-    <BFormInput :disabled="true" />
-  </BInputGroup>
+      <BFormInput :disabled="true" />
+    </BInputGroup>
 
-  <BCardGroup deck>
-    <BCard v-for="i in 15" :key="i" no-body>
-      <div class="d-flex w-100 mt-auto">
-        <BSkeleton width="30px" height="30px" class="me-2 ms-auto" />
+    <BCardGroup deck>
+      <BCard v-for="i in 15" :key="i" no-body>
+        <div class="d-flex w-100 mt-auto">
+          <BSkeleton width="30px" height="30px" class="me-2 ms-auto" />
+          <BSkeleton
+            :width="randint(30, 70) + '%'"
+            height="30px"
+            class="me-auto"
+          />
+        </div>
         <BSkeleton
-          :width="randint(30, 70) + '%'"
-          height="30px"
-          class="me-auto"
+          v-if="randint(0, 1)"
+          :width="randint(30, 85) + '%'"
+          height="24px"
+          class="mx-auto"
         />
-      </div>
-      <BSkeleton
-        v-if="randint(0, 1)"
-        :width="randint(30, 85) + '%'"
-        height="24px"
-        class="mx-auto"
-      />
-      <BSkeleton
-        :width="randint(30, 85) + '%'"
-        height="24px"
-        class="mx-auto mb-auto"
-      />
-    </BCard>
-  </BCardGroup>
+        <BSkeleton
+          :width="randint(30, 85) + '%'"
+          height="24px"
+          class="mx-auto mb-auto"
+        />
+      </BCard>
+    </BCardGroup>
+  </BSkeletonWrapper>
 </template>
 
 <style lang="scss" scoped>
diff --git a/app/src/components/globals/skeletons/BSkeleton.vue b/app/src/components/globals/skeletons/BSkeleton.vue
index 061289f0..d8a023e7 100644
--- a/app/src/components/globals/skeletons/BSkeleton.vue
+++ b/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>
diff --git a/app/src/components/globals/skeletons/BSkeletonWrapper.vue b/app/src/components/globals/skeletons/BSkeletonWrapper.vue
index 59680c5b..b080c530 100644
--- a/app/src/components/globals/skeletons/BSkeletonWrapper.vue
+++ b/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>
diff --git a/app/src/components/globals/skeletons/CardFormSkeleton.vue b/app/src/components/globals/skeletons/CardFormSkeleton.vue
index 8ff58bd5..16ab7944 100644
--- a/app/src/components/globals/skeletons/CardFormSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardFormSkeleton.vue
@@ -2,59 +2,55 @@
 import { randint } from '@/helpers/commons'
 import type { Cols } from '@/types/commons'
 
-withDefaults(
-  defineProps<{
-    itemCount?: number
-    cols: Cols
-  }>(),
-  {
-    itemCount: 5,
-    cols: () => ({ md: 4, lg: 2 }),
-  },
-)
+withDefaults(defineProps<{ itemCount?: number; cols: Cols }>(), {
+  itemCount: 5,
+  cols: () => ({ md: 4, lg: 2 }),
+})
 </script>
 
 <template>
-  <BCard>
-    <template #header>
-      <BSkeleton width="30%" height="36px" class="m-0" />
-    </template>
+  <BSkeletonWrapper>
+    <BCard>
+      <template #header>
+        <BSkeleton width="30%" height="26px" class="m-0" />
+      </template>
 
-    <template v-for="count in itemCount" :key="count">
-      <BRow :class="{ 'd-block': cols === null }">
-        <BCol v-bind="cols">
-          <div style="height: 38px" class="d-flex align-items-center">
-            <BSkeleton
-              class="m-0"
-              :width="randint(45, 100) + '%'"
-              height="24px"
-            />
-          </div>
-        </BCol>
+      <template v-for="count in itemCount" :key="count">
+        <BRow :class="{ 'd-block': cols === null }">
+          <BCol v-bind="cols">
+            <div style="height: 38px" class="d-flex align-items-center">
+              <BSkeleton
+                class="m-0"
+                :width="randint(45, 100) + '%'"
+                height="24px"
+              />
+            </div>
+          </BCol>
 
-        <BCol>
-          <div
-            v-if="count % 2 === 0"
-            class="w100 d-flex justify-content-between"
-          >
-            <BSkeleton width="100%" height="38px" />
+          <BCol>
+            <div
+              v-if="count % 2 === 0"
+              class="w100 d-flex justify-content-between"
+            >
+              <BSkeleton width="100%" height="38px" />
 
-            <BSkeleton width="38px" height="38px" class="ms-2" />
-          </div>
+              <BSkeleton width="38px" height="38px" class="ms-2" />
+            </div>
 
-          <BSkeleton v-else width="100%" height="38px" />
+            <BSkeleton v-else width="100%" height="38px" />
 
-          <BSkeleton :width="randint(15, 35) + '%'" height="19px" />
-        </BCol>
-      </BRow>
+            <BSkeleton :width="randint(15, 35) + '%'" height="19px" />
+          </BCol>
+        </BRow>
 
-      <hr />
-    </template>
+        <hr />
+      </template>
 
-    <template #footer>
-      <div class="d-flex justify-content-end w-100">
-        <BSkeleton width="100px" height="38px" />
-      </div>
-    </template>
-  </BCard>
+      <template #footer>
+        <div class="d-flex justify-content-end w-100">
+          <BSkeleton width="100px" height="36px" />
+        </div>
+      </template>
+    </BCard>
+  </BSkeletonWrapper>
 </template>
diff --git a/app/src/components/globals/skeletons/CardInfoSkeleton.vue b/app/src/components/globals/skeletons/CardInfoSkeleton.vue
index 3087d8d5..f60a5cef 100644
--- a/app/src/components/globals/skeletons/CardInfoSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardInfoSkeleton.vue
@@ -5,18 +5,20 @@ withDefaults(defineProps<{ itemCount: number }>(), { itemCount: 5 })
 </script>
 
 <template>
-  <BCard>
-    <template #header>
-      <BSkeleton width="30%" height="36px" class="m-0" />
-    </template>
+  <BSkeletonWrapper>
+    <BCard>
+      <template #header>
+        <BSkeleton width="30%" height="36px" class="m-0" />
+      </template>
 
-    <BRow v-for="i in itemCount" :key="i" no-gutters>
-      <BCol cols="5" md="3" xl="3">
-        <BSkeleton :width="randint(45, 95) + '%'" height="19px" />
-      </BCol>
-      <BCol>
-        <BSkeleton :width="randint(10, 60) + '%'" height="19px" />
-      </BCol>
-    </BRow>
-  </BCard>
+      <BRow v-for="i in itemCount" :key="i" no-gutters>
+        <BCol cols="5" md="3" xl="3">
+          <BSkeleton :width="randint(45, 95) + '%'" height="19px" />
+        </BCol>
+        <BCol>
+          <BSkeleton :width="randint(10, 60) + '%'" height="19px" />
+        </BCol>
+      </BRow>
+    </BCard>
+  </BSkeletonWrapper>
 </template>
diff --git a/app/src/components/globals/skeletons/CardListSkeleton.vue b/app/src/components/globals/skeletons/CardListSkeleton.vue
index 4984cf1d..c388d69c 100644
--- a/app/src/components/globals/skeletons/CardListSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardListSkeleton.vue
@@ -1,26 +1,31 @@
 <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>
-  <BCard no-body>
-    <template #header>
-      <BSkeleton width="30%" height="36px" class="m-0" />
-    </template>
+  <BSkeletonWrapper :search="search">
+    <BCard no-body>
+      <template #header>
+        <BSkeleton width="30%" height="36px" class="m-0" />
+      </template>
 
-    <BListGroup flush>
-      <BListGroupItem v-for="count in itemCount" :key="count" class="d-flex">
-        <div style="width: 20%">
-          <BSkeleton
-            :width="randint(50, 100) + '%'"
-            height="24px"
-            class="me-3"
-          />
-        </div>
-        <BSkeleton :width="randint(30, 80) + '%'" height="24px" class="m-0" />
-      </BListGroupItem>
-    </BListGroup>
-  </BCard>
+      <BListGroup flush>
+        <BListGroupItem v-for="count in itemCount" :key="count" class="d-flex">
+          <div style="width: 20%">
+            <BSkeleton
+              :width="randint(50, 100) + '%'"
+              height="24px"
+              class="me-3"
+            />
+          </div>
+          <BSkeleton :width="randint(30, 80) + '%'" height="24px" class="m-0" />
+        </BListGroupItem>
+      </BListGroup>
+    </BCard>
+  </BSkeletonWrapper>
 </template>
diff --git a/app/src/components/globals/skeletons/ListGroupSkeleton.vue b/app/src/components/globals/skeletons/ListGroupSkeleton.vue
index 3e4d2492..2e325bf6 100644
--- a/app/src/components/globals/skeletons/ListGroupSkeleton.vue
+++ b/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>
-  <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 :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>
diff --git a/app/src/components/layouts/MainLayout.vue b/app/src/components/layouts/MainLayout.vue
index 0afe3eb2..74c90f5c 100644
--- a/app/src/components/layouts/MainLayout.vue
+++ b/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>
diff --git a/app/src/router/routes.ts b/app/src/router/routes.ts
index 8a869327..36d3e44c 100644
--- a/app/src/router/routes.ts
+++ b/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'],
     },
   },
   {