Skeleton

Skeleton components provide loading placeholders with a subtle pulse animation. They match the shape of content being loaded, reducing perceived load time.

Preview

Base Skeleton

The fundamental skeleton with customizable dimensions.

<Skeleton width={80} height={80} borderRadius={8} />
<Skeleton width={120} height={40} borderRadius={20} />
<Skeleton width={40} height={40} borderRadius={40} />

SkeletonText

Multi-line text placeholder with natural variation.

<SkeletonText lines={3} lastLineWidth="60%" />

SkeletonStatCard

For stat cards in dashboards.

SkeletonReadingItem

For reading list items with hexagram visual.

Full Screen Skeletons

ProfileScreenSkeleton

HistoryScreenSkeleton

API Reference

Skeleton Props

Prop	Type	Default	Description
`width`	`number \| string`	`'100%'`	Element width
`height`	`number`	`20`	Element height
`borderRadius`	`number`	`4`	Corner radius
`style`	`ViewStyle`	-	Additional styles

SkeletonText Props

Prop	Type	Default	Description
`lines`	`number`	`3`	Number of lines
`lineHeight`	`number`	`16`	Height per line
`lastLineWidth`	`string`	`'60%'`	Width of last line

Animation

The skeleton uses a subtle pulse animation:

const pulse = Animated.loop(
  Animated.sequence([
    Animated.timing(pulseAnim, {
      toValue: 0.7,
      duration: 800,
      useNativeDriver: true,
    }),
    Animated.timing(pulseAnim, {
      toValue: 0.4,
      duration: 800,
      useNativeDriver: true,
    }),
  ])
);

Property	Value
Duration	800ms per phase (1.6s cycle)
Opacity Range	0.4 - 0.7
Driver	Native (60fps)

Usage Guidelines

Do

Match skeleton shapes to actual content
Use consistent skeleton heights for text
Show skeletons briefly (under 3 seconds ideally)
Combine with Suspense for data loading

Don’t

Use skeletons for instant actions
Make skeletons too prominent
Animate skeleton position (only opacity)
Show skeletons for more than 10 seconds