feat: [UI] Replace Loading Spinner with Skeleton Loading on Authors Page

[Rishi2600]

Summary

Replaces the basic loading spinner on the authors page with a modern skeleton loading interface to improve user experience.

Fixes #674

The current authors page shows a centered spinner during data loading, which:

• Shows a basic spinner
• User thinks they are waiting longer even if they are not
• Keeps the search bar hidden during loading, preventing user interaction

Before for a loading time of about 5 seconds

Solution

Implemented skeleton loading that:

• Displays structure immediately - Shows card layout before data arrives
• Keeps search bar interactive - Users can type during loading
• Reduces perceived wait time - User feels things got faster
• Matches modern UX patterns - Similar to LinkedIn, YouTube, GitHub
• Includes shimmer animation - Provides visual feedback that loading is in progress
• Supports dark mode - Properly styled for both themes

After for the same loading time

20251224_213615_Export.MP4

Key Features

1. 6 skeleton cards displayed in a responsive grid - 3 in one horizontal line and 2 such lines
2. Staggered fade-in animation matching existing card animations
3. Shimmer effect for visual "loading" feedback
4. Interactive search bar during loading
5. The skeleton component matches the exact structure of real author cards for seamless transition

Changes Made -

Added a file src/components/AuthorCardSkeleton.tsx - Reusable skeleton component with Framer Motion animations
Modified src/pages/AuthorsPage.tsx - Updated renderContent() to show skeletons during loading
src/styles/globals.css - Added shimmer keyframe animation

Testings -

Tested for slow network (DevTools → Network → Slow 3G)
Skeletons are lightweight, so loading time remains same

Checklist

Code follows project style guidelines

• Self-review completed
• Comments added for complex logic
• No new warnings generated
• Works in both light and dark modes
• No console errors or warnings
• Tested on slow network conditions

Some future improvements I think can be done after this -

1. Dynamically adjust skeleton count based on viewport size
2. Enhanced accessibility - ARIA labels
3. Add an error boundary wrapper for graceful error handling
4. Skeleton loading for individual author pages - Apply the same pattern to the single author detail page, Create consistent loading experience across the site

Questions or suggestions? Feel free to suggest changes!

[github-actions]

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

---

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

[Rishi2600]

Hello @FirePheonix,
If you could spare a moment, can you review this, please?

[FirePheonix]

@Rishi2600 can you optimize this more?
Like, getting the text data first them image data, maybe that can help?
And maybe lazy loading the meta datas too?

[Rishi2600]

@FirePheonix Yes, I'll be happy to try and optimize this further. Working on it.

[github-actions]

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• TypeScript linting failed

How to fix:

Platform	Command	Description
🐧 Unix/macOS/Linux	npm run format	Auto-fix all formatting issues
🪟 Windows	npm run format:file <filename>	Fix specific files
🔍 Check Only	npm run format:check	Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

---

🛠️ Next Steps

1. Fix the issues mentioned above
2. Test locally to ensure everything works
3. Push your fixes to this branch
4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits