feat: add reusable loading skeletons for async sections (#3446)

[dhiraj-dev-19]

Summary

This PR enhances perceived performance and loading UX by replacing text-based and spinner-based loading states with reusable skeleton loaders across key asynchronous sections of the application.

The implementation reuses Eventra's existing centralized skeleton system and focuses on reducing layout shifts (CLS), improving accessibility, and providing a smoother user experience during data loading.

Closes #3446

Changes Made

Contributors Carousel (ContributorsCarousel.js)

• Replaced the plain "Loading contributors..." placeholder with responsive ContributorCardSkeleton components.
• Integrated skeletons directly into the existing carousel structure to maintain layout parity.
• Preserved responsive carousel sizing and spacing during loading.
• Added localized screen-reader loading announcements where necessary.

Event Recommendation (EventRecommendation.jsx)

• Replaced spinner-based loading states with a responsive grid of EventCardSkeleton placeholders.
• Replaced AI Insights modal loading text with structured SkeletonBlock placeholders.
• Improved loading-state consistency and reduced visible layout shifts.

Calendar Page (CalendarPage.jsx)

• Replaced "Loading events for this day..." text with card-shaped skeleton placeholders.
• Preserved sidebar dimensions while asynchronous content loads.

Shared Skeleton System (SkeletonLoaders.jsx)

• Added aria-hidden="true" to shared skeleton root containers to ensure accessibility-safe rendering.
• Reused the existing skeleton architecture without introducing new dependencies or libraries.

Accessibility

• Skeleton placeholders are hidden from assistive technologies using aria-hidden="true".
• Loading announcements remain localized and avoid duplicate screen-reader feedback.
• Existing reduced-motion support remains fully compatible.

Verification

Layout Stability (CLS)

• Contributors Carousel maintains layout consistency during loading.
• Recommendation grid reserves space before content loads.
• Calendar sidebar remains visually stable during async fetches.

Responsive Testing

Verified across:

• 375px (mobile)
• 640px
• 768px (tablet)
• 1024px+ (desktop)

Accessibility Testing

• Verified skeletons are ignored by screen readers.
• Verified keyboard navigation remains unaffected.
• Verified no duplicate loading announcements.

Build Validation

npm run build

Build completed successfully with no compilation errors.

Visual Evidence

Contributors Carousel

• Before: Plain loading text
• After: Responsive contributor skeleton cards

Event Recommendation

• Before: Spinner + loading text
• After: Event card skeleton grid

AI Insights Modal

• Before: Loading text
• After: Structured SkeletonBlock placeholders

Calendar Sidebar

• Before: Text-based loading state
• After: Card-style skeleton placeholders

Scope

This PR intentionally avoids:

• new dependencies
• third-party skeleton libraries
• dashboard rewrites
• skeleton framework redesigns
• unrelated refactoring

[vercel]

@dhiraj-dev-19 is attempting to deploy a commit to the sandeepvashishtha's projects Team on Vercel.

A member of the Team first needs to authorize it.

[dhiraj-dev-19]

@SandeepVashishtha @TheSkylancer , pls review PR and merge it.

[dhiraj-dev-19]

@SandeepVashishtha @TheSkylancer all merge conflicts solved!!