From 5b0cd3a607ba7693eeb649cc5c40f36e1ec3803e Mon Sep 17 00:00:00 2001
From: Nathaniel Waldschmidt <nathaniel.waldsch@gmail.com>
Date: Tue, 25 Jun 2024 07:25:19 -0500
Subject: [PATCH] feat: skeleton updates

---
 CHANGELOG.md                        |  4 ++++
 package-lock.json                   |  4 ++--
 package.json                        |  2 +-
 src/components/Tile/Tile.stories.ts |  1 -
 src/components/Tile/Tile.vue        | 10 +++++++---
 src/utils/isSlotEmpty.ts            | 20 ++++++++++++++++++++
 6 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 src/utils/isSlotEmpty.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 28db5c172..b15736c9a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.79
+
+- Improve `Skeleton` loading within `Tile` component
+
 ## v2.0.77
 
 - Add `Skeleton` loading to `Tile` and `Pagination` components
diff --git a/package-lock.json b/package-lock.json
index 5e47e6baf..8c53eec17 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.77",
+  "version": "2.0.78",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@lob/ui-components",
-      "version": "2.0.77",
+      "version": "2.0.78",
       "dependencies": {
         "date-fns": "^2.29.3",
         "date-fns-holiday-us": "^0.3.1",
diff --git a/package.json b/package.json
index 3261cd580..d11e24774 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.77",
+  "version": "2.0.78",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"
diff --git a/src/components/Tile/Tile.stories.ts b/src/components/Tile/Tile.stories.ts
index b3013e67b..e4f04bb21 100644
--- a/src/components/Tile/Tile.stories.ts
+++ b/src/components/Tile/Tile.stories.ts
@@ -50,7 +50,6 @@ export const Primary: StoryObj<typeof Tile> = {
     template: `
       <Tile v-bind="args">
         <template #header>Total Volume</template>
-        <template #default>193,038,282</template>
       </Tile>
     `
   })
diff --git a/src/components/Tile/Tile.vue b/src/components/Tile/Tile.vue
index 4cbfbd43b..689bf6e12 100644
--- a/src/components/Tile/Tile.vue
+++ b/src/components/Tile/Tile.vue
@@ -14,7 +14,7 @@
     >
       <template #header>
         <slot name="header" />
-        <LoadingSpinnerIcon v-if="$slots.default && loading" />
+        <LoadingSpinnerIcon v-if="isSlotEmpty($slots.default) && loading" />
       </template>
 
       <template #icons>
@@ -24,8 +24,11 @@
       </template>
 
       <template #default>
-        <template v-if="!$slots.default && loading">
-          <Skeleton :height="size === TileSize.LG ? '32px' : '28px'" />
+        <template v-if="!isSlotEmpty($slots.default) && loading">
+          <Skeleton
+            :height="size === TileSize.LG ? '32px' : '28px'"
+            width="50%"
+          />
         </template>
         <Alert v-else-if="error" variant="error">
           {{ error }}
@@ -50,6 +53,7 @@
 import Alert from '@/components/Alert/Alert.vue';
 import ConditionalClickWrapper from '@/utils/ConditionalClickWrapper.vue';
 import Panel from 'primevue/panel';
+import { isSlotEmpty } from '@/utils/isSlotEmpty';
 import { computed } from 'vue';
 
 import { TileColor, TileSize } from './constants';
diff --git a/src/utils/isSlotEmpty.ts b/src/utils/isSlotEmpty.ts
new file mode 100644
index 000000000..8b9e5f83e
--- /dev/null
+++ b/src/utils/isSlotEmpty.ts
@@ -0,0 +1,20 @@
+import { Comment, Text, Slot, VNode } from 'vue';
+
+/** https://github.com/vuejs/core/issues/4733#issuecomment-1024816095 */
+export const isSlotEmpty = (
+  slot: Slot | undefined,
+  slotProps = {}
+): boolean => {
+  if (!slot) return false;
+
+  return slot(slotProps).some((vnode: VNode) => {
+    if (vnode.type === Comment) return false;
+
+    if (Array.isArray(vnode.children) && !vnode.children.length) return false;
+
+    return (
+      vnode.type !== Text ||
+      (typeof vnode.children === 'string' && vnode.children.trim() !== '')
+    );
+  });
+};