UI/UX: ✨ Add skeleton screens and loading states for improved UX

### 🎨 The UI/UX Update

The interface currently shows blank areas or sudden layout shifts while sections, images, or dynamic content are being prepared. This can make the application feel slow or unresponsive, particularly on unstable or low-bandwidth connections.

This proposal introduces consistent skeleton placeholders and lightweight loading indicators to provide immediate visual feedback while content is in progress. The goal is to improve perceived performance and maintain layout stability.

### Current Design Issues

- Temporary blank regions appear during navigation or initial render.
- Layout jumps occur once assets finish loading.
- Users receive little feedback indicating that content is on the way.
- Perceived performance is lower than actual performance.

### Proposed Solution

- Implement route-level loading UI using the App Router loading file.
- Create reusable skeleton components for common patterns (text blocks, cards, avatars, buttons).
- Replace empty states with structured placeholders that mimic final layout.
- Add subtle animation to communicate progress without distraction.
- Ensure loaders are accessible and screen-reader friendly.

This will be implemented incrementally, starting from high-visibility sections such as the hero and feature areas.

### Design Considerations

- [x] Accessibility
- [x] Visual consistency
- [x] Responsive design
- [ ] Dark mode support
- [x] Other