Description
When the feed is loading, the UI currently shows a simple loading state. Replace this with skeleton placeholder cards that match the shape of real post cards for a smoother perceived loading experience.
Suggested approach
- Create a
PostCardSkeleton component with animated pulse placeholders
- Use Tailwind's
animate-pulse class on gray placeholder blocks
- Match the layout of the real post card (avatar circle, name bar, text lines, action buttons)
- Show 3-5 skeleton cards while data is loading
Files to look at
src/components/ — existing post card and feed components
- Look at how TanStack Query loading states are handled in
src/hooks/
Great way to learn the component structure and Tailwind animation utilities.
Description
When the feed is loading, the UI currently shows a simple loading state. Replace this with skeleton placeholder cards that match the shape of real post cards for a smoother perceived loading experience.
Suggested approach
PostCardSkeletoncomponent with animated pulse placeholdersanimate-pulseclass on gray placeholder blocksFiles to look at
src/components/— existing post card and feed componentssrc/hooks/Great way to learn the component structure and Tailwind animation utilities.