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.

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