Skeleton loader

src/components/DxhSkeletonLoader.vue

@@ -0,0 +1,75 @@
+<template>
+  <div
+    :style="{
+      height: `${height}px`,
+      width: `${width}px`,
+      maxWidth: `${maxWidth}px`,
+      minWidth: `${minWidth}px`
+    }"
+    class="inline-block relative overflow-hidden align-middle w-full rounded-md bg-[#dddbdd]"
+    :class="[
+      { pulse: animate && mode === 'pulse' },
+      { shimmer: animate && mode === 'shimmer' },
+      { 'rounded-full': rounded }
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface props {
+  maxWidth?: number
+  minWidth?: number
+  height?: number
+  width?: number
+  mode?: 'shimmer' | 'pulse'
+  rounded?: boolean
+  animate?: boolean
+}
+
+withDefaults(defineProps<props>(), {
+  height: 30,
+  animate: true,
+  mode: 'shimmer'
+})
+</script>
+
+<style scoped>
+.shimmer::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+  background-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0,
+    rgba(255, 255, 255, 0.2) 20%,
+    rgba(255, 255, 255, 0.5) 60%,
+    rgba(255, 255, 255, 0)
+  );
+  animation: shimmer 3s infinite;
+  content: '';
+}
+
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.pulse {
+  animation: pulse 1s linear infinite alternate;
+}
+
+@keyframes pulse {
+  0% {
+    background-color: rgb(209, 209, 209);
+  }
+  100% {
+    background-color: rgb(243, 243, 243);
+  }
+}
+</style>

src/components/__tests__/DxhSkeletonLoader.spec.ts

@@ -0,0 +1,62 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DxhSkeletonLoader from '../DxhSkeletonLoader.vue'
+
+describe('DxhSkeletonLoader.vue', () => {
+  it('renders the shimmer with correct props', () => {
+    const wrapper = mount(DxhSkeletonLoader, {
+      props: {
+        height: 30,
+        width: 100,
+        maxWidth: 150,
+        minWidth: 50,
+        mode: 'shimmer',
+        rounded: true,
+        animate: true
+      }
+    })
+
+    expect(wrapper.find('div').attributes('style')).not.toMatch(
+      'height: 30px; width: 100px; maxWidth: 150px; minWidth: 50px;'
+    )
+
+    expect(wrapper.classes()).toContain('inline-block')
+    expect(wrapper.classes()).toContain('relative')
+    expect(wrapper.classes()).toContain('overflow-hidden')
+    expect(wrapper.classes()).toContain('align-middle')
+    expect(wrapper.classes()).toContain('w-full')
+    expect(wrapper.classes()).toContain('rounded-md')
+    expect(wrapper.classes()).toContain('bg-[#dddbdd]')
+    expect(wrapper.classes()).toContain('shimmer')
+    expect(wrapper.classes()).toContain('rounded-full')
+  })
+
+  it('applies the shimmer animation', async () => {
+    const wrapper = mount(DxhSkeletonLoader, {
+      props: {
+        height: 30,
+        width: 100,
+        mode: 'shimmer',
+        animate: true
+      }
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('.shimmer').exists()).toBe(true)
+  })
+
+  it('applies the pulse animation', async () => {
+    const wrapper = mount(DxhSkeletonLoader, {
+      props: {
+        height: 30,
+        width: 100,
+        mode: 'pulse',
+        animate: true
+      }
+    })
+
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.pulse').exists()).toBe(true)
+  })
+})

src/index.ts

@@ -1,4 +1,5 @@
 import DButton from "./components/DButton.vue"
 import DInput from "./components/DInput.vue"
+import DxhSkeletonLoader from './components/DxhSkeletonLoader.vue'
 
-export default {DButton, DInput}
+export default { DButton, DInput, DxhSkeletonLoader }