💡[Feature]: Add loading states and skeleton screens for better UX

[Sravanthi359]

Is there an existing issue for this?

• I have searched the existing issues

Feature Description

The website currently doesn't provide visual feedback when users interact with buttons or when content loads. This makes the site feel unresponsive, especially on slower connections.

What to implement:

• Loading spinners for buttons (Book a Session, GitHub links)
• Skeleton cards for testimonials section while loading
• Loading states for navigation and form interactions

Technical approach:

• Create reusable LoadingSpinner component
• Create SkeletonCard component for content placeholders
• Add loading states to existing button components
• Implement smooth CSS animations

Use Case

As a user visiting the RecodeHive website, I want to see clear visual feedback when:

• Clicking on "Book a Session" button
• Loading testimonials section
• Navigating between pages
• Submitting forms or interacting with components

This will help me understand that the website is responding to my actions and provide a more professional user experience.

Benefits

• Better User Experience: Users get immediate feedback on their interactions
• Professional Appearance: Modern loading patterns make the site feel polished
• Improved Perceived Performance: Users feel the site is faster and more responsive
• Reduced Bounce Rate: Users are less likely to leave during loading periods
• Accessibility: Screen reader friendly loading states with proper ARIA labels

Add ScreenShots

No response

Priority

Medium

Record

• I have read the Contributing Guidelines
• Are you a GSSOC'25 contributor
• I want to work on this issue

[github-actions]

Thanks for opening this issue! 🎉 We'll look into it as soon as possible, estimated time for response is 5–8 hrs.

Don't raise PR unless assigned to you.

In the meantime, please provide all necessary details and context to your issue — screenshots or videos of your changes help speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your issue goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Resources which can help you know more about Github 👇🏻

1. End to End GitHub Beginner Playlist: GitHub Playlist.

2. Build your GitHub Profile: GitHub Profile Optimisation.

3. GitHub Handbook for dummies: GitHub Blog for Beginners.

[sanjay-kv]

loader is always a problem in terms of user 👍🏻

https://github.com/recodehive/recode-website/issues?q=is%3Aissue%20state%3Aopen%20no%3Aassignee

i have list of unassigned issue, maybe you can have a look at this.

[github-actions]

✅ This issue has been closed. Thank you for your contribution!

[Sravanthi359]

Hey, I understand the portfolio profiles task. Should I Create a separate GitHub repo for this (like the awesome-github-profiles one) and integrate it later, OR Add it as a new feature/button in the existing Devfolio project? What's the preferred approach?

…

On Sun, 17 Aug 2025 at 13:04, Sanjay Viswanathan ***@***.***> wrote: *sanjay-kv* left a comment (recodehive/recode-website#371) <#371 (comment)> loader is always a problem in terms of user 👍🏻 https://github.com/recodehive/recode-website/issues?q=is%3Aissue%20state%3Aopen%20no%3Aassignee i have list of unassigned issue, maybe you can have a look at this. — Reply to this email directly, view it on GitHub <#371 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BHM3IMYDQX2KNAY2ZQYOEVT3OAWBBAVCNFSM6AAAAACECPGPA2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTCOJUGE4TQOBWGM> . You are receiving this because you authored the thread.Message ID: ***@***.***>