From 1e5638b4875a9e8b20eaa5e82b999384de815211 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 13 Feb 2024 12:44:20 +0100
Subject: [PATCH] refs #6787 fix descriptor skeleton

---
 src/components/ui/CardDescriptor.vue          |  9 ++++-
 src/components/ui/SkeletonDescriptor.vue      | 39 ++++++++++++++++---
 .../Customer/Card/CustomerDescriptor.vue      |  8 ----
 3 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index afedfe06f3..082a93a558 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -83,7 +83,7 @@ function viewSummary(id) {
 
 <template>
     <div class="descriptor">
-        <template v-if="entity">
+        <template v-if="entity && !isLoading">
             <div class="header bg-primary q-pa-sm justify-between">
                 <slot name="header-extra-action" />
                 <QBtn
@@ -169,8 +169,13 @@ function viewSummary(id) {
             <slot name="after" />
         </template>
         <!-- Skeleton -->
-        <SkeletonDescriptor v-if="!entity" />
+        <SkeletonDescriptor v-if="!entity || isLoading" />
     </div>
+    <QInnerLoading
+        :label="t('globals.pleaseWait')"
+        :showing="isLoading"
+        color="primary"
+    />
 </template>
 
 <style lang="scss">
diff --git a/src/components/ui/SkeletonDescriptor.vue b/src/components/ui/SkeletonDescriptor.vue
index 470d47e492..9679751f56 100644
--- a/src/components/ui/SkeletonDescriptor.vue
+++ b/src/components/ui/SkeletonDescriptor.vue
@@ -1,10 +1,39 @@
 <template>
     <div id="descriptor-skeleton">
-        <div class="col q-pl-sm q-pa-sm">
-            <QSkeleton type="text" square height="45px" />
-            <QSkeleton type="text" square height="18px" />
-            <QSkeleton type="text" square height="18px" />
-            <QSkeleton type="text" square height="18px" />
+        <div class="row justify-between q-pa-sm">
+            <QSkeleton square size="40px" />
+            <QSkeleton square size="40px" />
+            <QSkeleton square height="40px" width="20px" />
+        </div>
+        <div class="col justify-between q-pa-sm q-gutter-y-xs">
+            <QSkeleton square height="40px" width="150px" />
+            <QSkeleton square height="30px" width="70px" />
+        </div>
+        <div class="col q-pl-sm q-pa-sm q-mb-md">
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
         </div>
 
         <QCardActions>
diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index 833a310ad0..2e8770fe76 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -19,17 +19,14 @@ const $props = defineProps({
         default: null,
     },
 });
-const isLoading = ref(false);
 const route = useRoute();
 const { t } = useI18n();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
-isLoading.value = true;
 
 const data = ref(useCardDescription());
 const setData = (entity) => (data.value = useCardDescription(entity.name, entity.id));
-isLoading.value = false;
 </script>
 
 <template>
@@ -122,11 +119,6 @@ isLoading.value = false;
             </QCardActions>
         </template>
     </CardDescriptor>
-    <QInnerLoading
-        :label="t('globals.pleaseWait')"
-        :showing="isLoading"
-        color="primary"
-    />
 </template>
 <i18n>
 {