Domain: Design / UI-UX
Difficulty: Intermediate
Description:
When users search for actors or productions, the page shows a simple "Loading..." text. Implement proper skeleton loaders (placeholder UI) that:
- Display skeleton cards matching the actual layout
- Animate to indicate data is loading
- Appear before the actual results load
- Match the final card design for seamless transition
Expected Outcome:
- Skeleton loader component created
- Applied to the actor search results page
- Applied to the production search results page
- Smooth visual transition from skeleton to actual data
- Improved perceived performance
Setup Steps:
- Create src/components/ui/skeleton-loader.tsx.
- Design skeletons matching actor-card and production-card layouts
- Update src/app/actors/page.tsx to show skeletons during loading
- Update src/app/productions/page.tsx to show skeletons during loading
- Test with network throttling in DevTools
Links/References:
- Pages to update: /actors, /productions.
- Components to reference: actor-card.tsx, production-card.tsx.
- Tailwind animation utilities: animate-pulse.