Feedback/DSSkeletonCard

DSSkeletonCard

feedback
since 0.1.0

Card-shaped skeleton placeholder with pulsing animation for loading states.

iOS 17+macOS 14+watchOS 10+tvOS 17+visionOS 1+

Purpose

Use as placeholder while card content is loading. Provides better UX than spinners.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

Examples

Loading cards

DSSkeletonCard takes no parameters; size it with frame modifiers if needed.

swift
if isLoading {
    VStack(spacing: DSSpacing.md) {
        ForEach(0..<3, id: \.self) { _ in
            DSSkeletonCard()
        }
    }
} else {
    ForEach(items) { item in
        ItemCard(item)
    }
}

Usage Guidelines

  • Match skeleton dimensions to actual content
  • Use multiple skeletons to show expected layout
  • Prefer skeletons over spinners for better perceived performance
  • Ensure smooth transition when content loads

Related Components

SkeletonPageLoaderCard