Replace Loading Spinners with Content-Aware Skeleton Screens #2
Description
Improve perceived performance by replacing generic loading spinners with skeleton screens that mirror the actual content structure, reducing user frustration during loading states.
📋 Requirements:
- - Create reusable skeleton components with proper dimensions
- - Add skeleton for Dashboard career recommendation cards
- - Implement skeleton for ChatBot message bubbles
- - Create skeleton for skill assessment question blocks
- - Add skeleton for analytics charts and graphs
- - Implement shimmer animation effect
- - Ensure skeletons match actual content layout exactly
- - Add proper accessibility labels for screen readers
🎨 Design Specifications:
- Base color: #f3f4f6 (gray-100)
- Shimmer color: #e5e7eb (gray-200)
- Animation duration: 1.5s ease-in-out infinite
- Border radius: Match actual components