feat: add elegant loading skeleton states for improved UX [GSSoC 2025]

[piyushkumar0707]

This PR implements elegant loading skeleton states for the FAQ and feature card sections, significantly improving the user experience during page load and data fetching.

Problem Statement

Previously, when users visited the site:

• FAQ section showed blank space while data was loading
• No visual feedback during data fetch operations
• Users might think the page was broken or unresponsive
• Poor perceived performance

Solution

Implemented modern skeleton loaders that:

• ✨ Display animated placeholder UI while content loads
• 🎭 Match the final content structure (FAQ cards, feature cards)
• 🌗 Support both light and dark modes
• 💫 Smoothly fade in actual content when ready
• ⚡ Improve perceived performance

---

🚀 Changes Made

1. CSS Enhancements (views/css/index.css)

• Added @keyframes skeleton-shimmer animation for smooth loading effect
• Created .skeleton base class with gradient animation
• Implemented dark mode skeleton styles
• Built skeleton component classes:
  • .skeleton-faq-card - Mimics FAQ accordion structure
  • .skeleton-feature-card - Mimics feature card layout
  • .skeleton-container - Container for skeleton groups
• Added .content-loaded class for fade-in animation
• Added .skeleton-hidden utility class

2. HTML Structure (views/index.html)

• Added skeleton loader for FAQ section (#faq-skeleton)
  • 3 skeleton FAQ cards matching real FAQ structure
  • Icon placeholder, title placeholder, content placeholder
• Added skeleton loader for feature cards (#features-skeleton)
  • 3 skeleton feature cards matching real card layout
  • Icon, title, and description placeholders
• Wrapped actual content in containers with IDs:
  • #faq-content - Contains real FAQ cards
  • #features-content - Contains real feature cards
• Initially hide real content with skeleton-hidden class

3. JavaScript Logic (views/scripts/components.js)

• Created showSkeleton(skeletonId, contentId) utility function
• Created hideSkeleton(skeletonId, contentId) utility function
• Added delay(ms) helper for timing control
• Implemented DOMContentLoaded listener to show skeletons initially
• Updated FAQ loading to hide skeleton after data fetch (600ms delay)
• Added skeleton hiding for feature cards (800ms delay)
• Improved error handling to hide skeleton even on fetch failure

---

🎯 Key Features

Shimmer Animation

• Smooth left-to-right shimmer effect
• 1.5s duration with ease-in-out timing
• Gradient-based for natural appearance

Dark Mode Support

• Automatically adapts to .tw-dark class
• Uses appropriate color scheme for skeletons
• Maintains consistency with site theme

Responsive Design

• Skeleton cards match responsive breakpoints
• Proper sizing on mobile, tablet, and desktop
• Uses Tailwind utility classes for consistency

Performance Optimized

• CSS-only animations (no JavaScript overhead)
• Minimal DOM manipulation
• Smooth fade-in transition

---

📸 Visual Changes

Before

• Blank white/black space during loading
• No visual feedback
• Users see empty sections

After

• Animated skeleton placeholders
• Clear visual feedback that content is loading
• Professional, modern appearance
• Smooth transition to real content

---

🧪 Testing Done

• ✅ Tested in light mode
• ✅ Tested in dark mode
• ✅ Verified skeleton appears on initial page load
• ✅ Confirmed smooth transition to real content
• ✅ Tested responsive behavior (mobile, tablet, desktop)
• ✅ Verified FAQ data loading integration
• ✅ Tested error handling (skeleton hides on error too)

---

🎨 Code Quality

• Clean, well-commented code
• Follows existing code style
• Reusable utility functions
• Proper error handling
• Performance-conscious implementation

---

📱 Screenshots

FAQ Section Skeleton (Light Mode)

┌─────────────────────────────────────┐
│ ▓▓▓  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓    │ <- Icon + Title (shimmer)
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  │ <- Content area (shimmer)
└─────────────────────────────────────┘

Feature Card Skeleton (Dark Mode)

┌─────────────────────────────────────┐
│ ▓▓▓  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓              │ <- Icon + Title
│ ▓▓▓  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  │
│ ▓▓▓  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  │ <- Description
│ ▓▓▓  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  │
└─────────────────────────────────────┘

---

🔗 Related Issues

• Improves UX during page load
• Addresses blank content flash
• Follows modern web development best practices
• Aligns with Material Design and Skeleton UI patterns

---

✅ Checklist

• Code follows project style guidelines
• Self-review of code completed
• Changes are responsive
• Dark mode support implemented
• No console errors
• Tested on multiple screen sizes
• Commit message follows conventional commits format

---

💡 Future Enhancements

Potential improvements for follow-up PRs:

• Add skeleton for testimonial section
• Implement skeleton for project cards
• Add staggered animation for multiple skeletons
• Progressive skeleton reveal based on scroll position

---

🤝 Contributing

This PR demonstrates modern UX patterns and can serve as a reference for implementing skeleton loaders in other sections of the application.

---

Thank you for reviewing this PR! 🙏

Feel free to suggest improvements or request changes.

[vercel]

@piyushkumar0707 is attempting to deploy a commit to the Piyush Patel's projects Team on Vercel.

A member of the Team first needs to authorize it.

[piyushpatelcodes]

@piyushkumar0707 Loved your Work But this is GPT code and i cannot accept it based on this review. For this Review Please submit a short demo video displaying your feature and then we will consider it. We also have a checklist that you need to follow.

Checklist: Please confirm the following checks when submitting the pull request

It help us ensure the completeness of the project. (These checks are mandatory, your PR will be rejected if you fail even one of these) :

• Attach Proof of Work - Include at least one screenshot or short video showing the bot or feature working.
• What problem you are solving, Explain Your Approach In your PR description
• PR links to the issue (e.g., Closes #)