feat: skeleton updates (#522)

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

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"

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>
     `
   })

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';

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() !== '')
+    );
+  });
+};