feat: add Skeleton component and SkeletonWrapper component

[hunterbecton]

What/Why

This PR introduces a Skeleton primitive to VIBES that will help streamline the creation of skeleton loaders across the project. I'm also proposing a SkeletonWrapper component to simplify the process of creating component skeletons because it automatically handles accessibility and removes the need of using data-pending in order to handle skeleton animations.

Skeleton component

• Provides a versatile loading placeholder component with multiple types: text, image, box, and circle
• Supports theming through CSS variables, allowing customization of the skeleton's background color
• Offers a variety of border-radius options (sm, base, md, lg, xl, 2xl, 3xl, full) for rounded corners
• Allows specification of characterCount for text type to determine the width of the placeholder
• Supports aspectRatio for image type with predefined ratios (5:6, 3:4, 1:1)

SkeletonWrapper component

• Wraps children components with a pulsing animation to indicate loading state
• Includes accessibility features with a role="status" and a visually hidden "Loading..." text for screen readers

Testing

CleanShot.2024-12-22.at.20.38.26.mp4

[linear]

VIB-1040 Skeleton component

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
vibes	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 23, 2024 1:58am