SELF-363: Skeletons

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.77
+
+- Add `Skeleton` loading to `Tile` and `Pagination` components
+
 ## v2.0.76
 
 - `Modal` improvements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.76",
+  "version": "2.0.77",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

src/components/Pagination/PaginationTotal.vue

@@ -1,8 +1,9 @@
 <template>
   <p class="pagination-total" data-testid="uic-pagination-total">
-    <LoadingSpinnerIcon
+    <Skeleton
       v-if="loading"
-      :size="14"
+      width="40px"
+      height="14px"
       data-testid="uic-pagination-total-loading"
     />
     <template v-else>{{ totalRows }}</template>
@@ -11,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { LoadingSpinnerIcon } from '@/components/LoadingSpinnerIcon';
+import { Skeleton } from '@/components/Skeleton';
 import { computed } from 'vue';
 
 const props = withDefaults(

src/components/Tile/Tile.vue

@@ -14,6 +14,7 @@
     >
       <template #header>
         <slot name="header" />
+        <LoadingSpinnerIcon v-if="$slots.default && loading" />
       </template>
 
       <template #icons>
@@ -23,21 +24,18 @@
       </template>
 
       <template #default>
-        <template v-if="loading">
-          <LoadingSpinnerIcon
-            :width="size === TileSize.LG ? '32' : '28'"
-            :height="size === TileSize.LG ? '32' : '28'"
-          />
+        <template v-if="!$slots.default && loading">
+          <Skeleton :height="size === TileSize.LG ? '32px' : '28px'" />
         </template>
         <Alert v-else-if="error" variant="error">
           {{ error }}
         </Alert>
         <template v-else>
-          <div class="flex flex-row items-end">
+          <div :class="['uic-panel-content', { loading }]">
             <slot name="default" />
             <p
               v-if="$slots['subtext']"
-              class="ml-4 type-small-400 text-gray-600"
+              :class="['uic-panel-subcontent', { loading }]"
             >
               <slot name="subtext" />
             </p>
@@ -50,13 +48,14 @@
 
 <script setup lang="ts">
 import Alert from '@/components/Alert/Alert.vue';
-import { Icon, IconName } from '../Icon';
+import ConditionalClickWrapper from '@/utils/ConditionalClickWrapper.vue';
 import Panel from 'primevue/panel';
 import { computed } from 'vue';
 
-import ConditionalClickWrapper from '@/utils/ConditionalClickWrapper.vue';
 import { TileColor, TileSize } from './constants';
+import { Icon, IconName } from '../Icon';
 import { LoadingSpinnerIcon } from '../LoadingSpinnerIcon';
+import { Skeleton } from '../Skeleton';
 
 defineOptions({ inheritAttrs: false });
 
@@ -108,6 +107,25 @@ const computedClasses = computed(() => [
   @apply flex flex-col justify-center;
   @apply p-6 min-w-fit;
 
+  &-content {
+    @apply flex flex-row items-end;
+    @apply transition-colors;
+
+    &.loading {
+      @apply text-gray-300;
+    }
+  }
+
+  &-subcontent {
+    @apply ml-4;
+    @apply type-small-400;
+    @apply transition-colors;
+
+    &.loading {
+      @apply text-gray-200;
+    }
+  }
+
   &:not(.disabled).clickable {
     &:hover {
       .uic-panel-click-icon {

src/main.ts

@@ -1,9 +1,11 @@
-import './assets/styles/main.scss';
 import 'primeicons/primeicons.css';
+import Tooltip from 'primevue/tooltip';
+import { App } from 'vue';
+
+import './assets/styles/main.scss';
 import * as components from './components';
 import * as mixins from './mixins';
 import * as configs from './config';
-import { App } from 'vue';
 
 const ComponentLibrary = {
   install(app: App) {
@@ -20,6 +22,7 @@ const ComponentLibrary = {
       const component = components[componentName];
       app.component(component.name || componentName, component);
     }
+    app.directive('tooltip', Tooltip);
   }
 };