From 5462d3ce9a823b28682863fca9afd64689242813 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 5 Feb 2024 09:57:09 +0100
Subject: [PATCH 1/3] refs #6787 isLoading

---
 src/pages/Customer/Card/CustomerDescriptor.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index 222406d8a..833a310ad 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -19,16 +19,17 @@ 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>
@@ -121,6 +122,11 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
             </QCardActions>
         </template>
     </CardDescriptor>
+    <QInnerLoading
+        :label="t('globals.pleaseWait')"
+        :showing="isLoading"
+        color="primary"
+    />
 </template>
 <i18n>
 {
-- 
2.40.1


From 760b2d5574a621a44a2532cbe418c47738f63917 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 5 Feb 2024 10:30:23 +0100
Subject: [PATCH 2/3] refs #6787 isLoading CardDescriptor

---
 src/components/ui/CardDescriptor.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 8f6ffa35d..afedfe06f 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, useSlots, watch, computed } from 'vue';
+import { onMounted, useSlots, watch, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
@@ -39,6 +39,7 @@ const quasar = useQuasar();
 const slots = useSlots();
 const { t } = useI18n();
 const entity = computed(() => useArrayData($props.dataKey).store.data);
+const isLoading = ref(false);
 
 defineExpose({
     getData,
@@ -60,8 +61,13 @@ async function getData() {
         filter: $props.filter,
         skip: 0,
     });
-    const { data } = await arrayData.fetch({ append: false, updateRouter: false });
-    emit('onFetch', data);
+    isLoading.value = true;
+    try {
+        const { data } = await arrayData.fetch({ append: false, updateRouter: false });
+        emit('onFetch', data);
+    } finally {
+        isLoading.value = false;
+    }
 }
 const emit = defineEmits(['onFetch']);
 
-- 
2.40.1


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 3/3] 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 afedfe06f..082a93a55 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 470d47e49..9679751f5 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 833a310ad..2e8770fe7 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>
 {
-- 
2.40.1