feat: add skeleton loader for homepage images (#183)

[suryaprakash0010]

Add Skeleton Loader for Hero Section Images #183

Description

This PR implements a skeleton loader for the hero section images to enhance the user experience during image loading. The skeleton loader provides visual feedback while images are being loaded, eliminating the jarring empty space that was previously shown.

Changes

• Added a reusable Skeleton component with shimmer animation
• Implemented image pre-loading with proper state management
• Added error handling for image loading failures
• Enhanced the hero section with smooth transitions
• Added dark mode support for the skeleton loader
• Improved responsive design for all screen sizes

Testing

• Tested on desktop (Chrome, Firefox, Safari)
• Tested on mobile devices (iOS, Android)
• Verified dark/light mode transitions
• Checked performance impact
• Tested with slow network conditions

Performance Impact

• Minimal bundle size increase
• Improved perceived performance
• Smooth transitions between states

Related Issues

• Fixes Skeleton loader #183

How to Test

1. Load the homepage
2. Observe the skeleton loader while images are loading
3. Test with different network conditions using browser dev tools
4. Toggle between dark and light modes
5. Test on different screen sizes

Notes

• The skeleton loader matches the dimensions of the actual content
• Smooth fade-in animation when images load
• Graceful fallback if images fail to load

[vercel]

@suryaprakash0010 is attempting to deploy a commit to the Samar Sajad's projects Team on Vercel.

A member of the Team first needs to authorize it.

[netlify]

👷 Deploy request for mc-hospital-management pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	82b55ce