Replace simple loading spinner with a detailed skeleton UI for blog post pages

[codeunia-dev]

This pull request replaces the existing basic loading spinner with a fully designed skeleton UI for blog post pages.
The new skeleton layout improves perceived performance, provides better visual feedback to users during loading states, and enhances the overall user experience.

Key Changes

• Added a structured skeleton UI for blog post pages (title, content blocks, metadata, and sidebar placeholders).
• Removed the old loading spinner component and related styles.
• Updated page-level loading logic to use the new skeleton component.
• Improved consistency with the design system.

Why This Is Needed

• Enhances UI polish and usability.
• Provides a more modern and informative loading state.
• Helps reduce layout shifts by preserving page structure while content loads.

Testing

• Verified skeleton renders correctly on initial page load.
• Tested responsiveness across breakpoints.
• Confirmed no regressions after removing spinner code.

Authored by: @akshay0611

Summary by CodeRabbit

Release Notes

• Improvements
  • Enhanced loading experience on blog pages with skeleton screen UI instead of spinners, providing better visual feedback during content loading.
  • Updated loading states to display placeholder layouts that match the final page structure, giving users a clearer sense of incoming content.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
codeunia	Building	Preview	Comment	Dec 12, 2025 6:05am

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Two blog page components updated to replace minimal loading spinners with comprehensive skeleton UI layouts, including headers, sections, and footer placeholders. Data fetching, state management, and public APIs remain unchanged. Formatting adjustments applied throughout without functional impact.

Changes

Cohort / File(s)	Change Summary
Skeleton Loading UI Enhancement app/blog/[slug]/page.tsx, app/blog/page.tsx	Replaced simple spinner loading states with full skeleton layouts featuring header, article/card sections, images, and content placeholders. Minor JSX formatting, whitespace adjustments, and motion wrapper refinements applied across both files. Data fetching logic, state updates, and error handling unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Straightforward UI replacement pattern applied consistently across two files
• No logic changes, data fetching modifications, or API signature updates
• Review focus: visual consistency of skeleton layouts and proper motion wrapper usage across components

Poem

🐰 A spinner was spinning, round and round,
Now skeletons dance without a sound!
Headers and cards in graceful gray,
Loading feels less like a wait—hooray! ✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/shimmer

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3d08075 and 46c1e32.

📒 Files selected for processing (2)

• app/blog/[slug]/page.tsx (12 hunks)
• app/blog/page.tsx (15 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}