[Polish] Loading states, skeleton screens, and empty states #22
Description
Summary
Add polished loading indicators, skeleton screens, and empty state designs throughout the app.
Details
Loading States
- Player stats page: Skeleton cards matching the stat card layout (pulsing gray rectangles)
- Match history: Skeleton table rows
- Charts: Placeholder chart outlines with loading spinner overlay
- Squad page: Skeleton member cards + aggregate stat placeholders
- Search: Subtle spinner in the search input
Skeleton Components
Skeleton/
├── SkeletonStatCard.vue // Matches StatCard dimensions
├── SkeletonTable.vue // Table row placeholders
├── SkeletonChart.vue // Chart area placeholder
├── SkeletonMemberCard.vue // Squad member card placeholder
Use Naive UI's built-in n-skeleton component for consistent styling.
Empty States
| Page | Empty Condition | Display |
|---|---|---|
| Home | First visit, no searches | Welcome message + "Search for a player to get started" |
| Player stats | Player found but no stats | "No stats available for this player" |
| Match history | No matches found | "No recent matches found" |
| Comparison | No players selected | "Add players to compare their stats" |
| Squad list | No squads created | "Create your first squad to track group stats" |
| Squad dashboard | Squad has no members | "Add members to your squad" |
Transition Polish
- Smooth fade-in when data replaces skeletons
- Staggered animation for stat cards (each card fades in slightly after the previous)
Acceptance Criteria
- Every data-loading state shows skeleton screens (not blank pages)
- Every empty state has a helpful message and call-to-action
- Transitions are smooth between loading → loaded states
- No layout shift when skeletons are replaced with real content