From 577624856c4731b9e218bbc41fe6912eac90e337 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Mon, 8 May 2023 15:14:20 -0300
Subject: [PATCH] Add skeleton component

---
 src/components/VSkeleton.global.vue      | 49 ++++++++++++++++++++++++
 src/modules/otus/components/TaxaInfo.vue | 19 +++------
 src/modules/otus/views/Index.vue         | 30 +++++++++------
 3 files changed, 74 insertions(+), 24 deletions(-)
 create mode 100644 src/components/VSkeleton.global.vue

diff --git a/src/components/VSkeleton.global.vue b/src/components/VSkeleton.global.vue
new file mode 100644
index 0000000..3bf6622
--- /dev/null
+++ b/src/components/VSkeleton.global.vue
@@ -0,0 +1,49 @@
+<template>
+  <slot />
+  <span
+    v-if="isEmpty"
+    :class="class"
+  >
+    <span
+      v-for="line in lines"
+      :key="line"
+      class="inline-block w-full rounded-sm bg-gray-100 leading-5"
+    >
+      &zwnj;
+    </span>
+  </span>
+</template>
+
+<script setup>
+import { useAttrs, useSlots, computed } from 'vue'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: 'w-full'
+  },
+
+  lines: {
+    type: Number,
+    default: 1
+  }
+})
+
+const slots = useSlots()
+const attrs = useAttrs()
+
+const isEmpty = computed(() => {
+  const children = slots.default?.()
+
+  return isEmptyVNode(children)
+})
+
+function isEmptyVNode(children) {
+  if (!children) return true
+
+  const [firstNode] = children
+  let str = firstNode.children
+
+  return firstNode.el || str
+}
+</script>
diff --git a/src/modules/otus/components/TaxaInfo.vue b/src/modules/otus/components/TaxaInfo.vue
index a41b3bb..472e77c 100644
--- a/src/modules/otus/components/TaxaInfo.vue
+++ b/src/modules/otus/components/TaxaInfo.vue
@@ -5,11 +5,11 @@
     </h2>
     <h1 class="text-xl dark:text-gray-100">
       <span>
-        <span 
+        <span
           :title="taxon.short_status"
-          v-html="taxon.full_name_tag" 
+          v-html="taxon.full_name_tag"
         />
-        <span 
+        <span
           v-if="!taxon.is_valid"
           class="ml-1"
           :class="statusStyle"
@@ -40,15 +40,8 @@ const props = defineProps({
   }
 })
 
-const status = computed(() => 
-  props.taxon.cached_is_valid
-    ? ''
-    : '&#10005;'
+const status = computed(() => (props.taxon.cached_is_valid ? '' : '&#10005;'))
+const statusStyle = computed(() =>
+  props.taxon.cached_is_valid ? '' : 'text-red-600'
 )
-const statusStyle = computed(() => 
-  props.taxon.cached_is_valid
-    ? ''
-    : 'text-red-600'
-)
-
 </script>
diff --git a/src/modules/otus/views/Index.vue b/src/modules/otus/views/Index.vue
index c41ab6b..adec8dc 100644
--- a/src/modules/otus/views/Index.vue
+++ b/src/modules/otus/views/Index.vue
@@ -5,12 +5,14 @@
         <div
           class="flex flex-col-reverse md:flex-row justify-between items-start"
         >
-          <Breadcrumb
-            v-if="isReady"
-            class="w-4/4 md:w-3/4"
-            :list="otu?.parents || {}"
-            :current="taxon"
-          />
+          <VSkeleton class="w-4/4 md:w-3/4">
+            <Breadcrumb
+              v-if="isReady"
+              class="w-4/4 md:w-3/4"
+              :list="otu?.parents || {}"
+              :current="taxon"
+            />
+          </VSkeleton>
           <Autocomplete
             class="print:hidden min-w-full mb-2 md:min-w-fit md:ml-2 md:mb-0 md:w-96"
             url="/otus/autocomplete"
@@ -23,11 +25,16 @@
         </div>
 
         <div class="mt-8 flex justify-between middle">
-          <TaxaInfo
-            v-if="isReady"
-            :taxon="taxon"
-            :otu-id="otu.id"
-          />
+          <VSkeleton
+            :lines="2"
+            class="w-96"
+          >
+            <TaxaInfo
+              v-if="isReady"
+              :taxon="taxon"
+              :otu-id="otu.id"
+            />
+          </VSkeleton>
         </div>
 
         <TabMenu
@@ -67,6 +74,7 @@ import { useOtuStore } from '../store/store'
 import Breadcrumb from '../components/Breadcrumb/Breadcrumb.vue'
 import TaxaInfo from '../components/TaxaInfo.vue'
 import { useHead, createHead } from 'unhead'
+import VSkeletonGlobal from '@/components/VSkeleton.global.vue'
 
 //import useChildrenRoutes from '../composables/useChildrenRoutes'