Skeleton

Skeletons show content structure while loading, Spinners just indicate activity. Use Skeletons for better UX—they reduce perceived wait time by showing what's coming and prevent jarring layout shifts when content appears. Reserve Spinners for short waits or actions.

Skeleton shapes should approximate final content: rectangles for text lines, circles for avatars, cards for posts. The closer the match, the smoother the transition. This "content-aware" loading feels more sophisticated and less disruptive.

Yes, subtle shimmer or pulse animations indicate activity and feel more polished than static gray boxes. Keep animations slow (2-3 seconds) and low-contrast to avoid distraction. The goal is communication, not entertainment.

Show the typical number of items users will see, or slightly more. For a feed that shows 10 posts, use 10 Skeletons. This sets accurate expectations and prevents surprise when content loads. Avoid showing infinite Skeletons—it's anxiety-inducing.

No—replace Skeletons with error messages if loading fails. Persistent Skeletons frustrate users who don't know if something's broken. Show clear error messages with retry options when loads fail, don't leave users wondering.

Yes, this Figma Skeleton component matches the shadcn/ui implementation exactly, ensuring your loading placeholders work consistently from design to production with proper animations and styling.