Feedback/DSSkeletonCard

DSSkeletonCard

feedback
since 1.2.0

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

iOSmacOS

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.

Props

PropTypeDefaultDescription
heightCGFloat120Card height
cornerRadiusCGFloatDSRadius.largeCorner radius

Examples

Loading cards

Show skeleton cards while data loads.

swift
if isLoading {
    VStack(spacing: DSSpacing.md) {
        DSSkeletonCard(height: 140)
        DSSkeletonCard(height: 140)
        DSSkeletonCard(height: 140)
    }
} 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