Skeleton List

Pre-composed skeleton component for list layouts with customizable item counts and optional avatars.

Demo

Usage

<script>
import SkeletonList from '$lib/shared/components/loading/SkeletonList.svelte';
</script>

<!-- Default 5 items -->
<SkeletonList />

<!-- Custom item count -->
<SkeletonList itemCount={3} />

<!-- With avatar icons -->
<SkeletonList showAvatar={true} />

<!-- Custom animation -->
<SkeletonList animation="pulse" />

<!-- Combined options -->
<SkeletonList
	itemCount={4}
	showAvatar={true}
	animation="shimmer"
/>

Props

List Item Structure

Each list item consists of:

• Avatar (optional): Circular placeholder
• Content Area:
  • Primary text line (100% width)
  • Secondary text line (70% width)

Common Use Cases

Comment Thread

<div class="comments">
	<SkeletonList
		itemCount={3}
		showAvatar={true}
	/>
</div>

Navigation Menu

<nav class="menu">
	<SkeletonList
		itemCount={6}
		showAvatar={false}
	/>
</nav>

User List

<div class="user-list">
	<SkeletonList
		itemCount={10}
		showAvatar={true}
		animation="pulse"
	/>
</div>

Feed Items

<div class="feed">
	{#each Array(3) as _}
		<SkeletonList itemCount={1} showAvatar={true} />
		<SkeletonImage />
	{/each}
</div>

Performance Considerations

• Limit Item Count: For long lists, use pagination rather than rendering many skeletons
• Virtual Scrolling: Consider virtual scrolling for lists with 50+ items
• Progressive Loading: Load and replace skeletons as data arrives

Best Practices

1. Match List Structure: Skeleton layout should mirror actual list items
2. Appropriate Count: Show realistic number of loading items
3. Avatar Consistency: Only show avatars if real list has them
4. Smooth Replacement: Fade transition when replacing with real content
5. Accessible Loading: Include proper ARIA labels for screen readers