[Polish] Loading states, skeleton screens, and empty states

[grovecj]

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