feat: add skeleton loader to event page

[mithaliphadtare]

Description

"Added a skeleton loader to the event details page to prevent layout shifts while data is being fetched. This improves user experience during loading states."

Fixes #38

Type of Change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

• Manual testing (describe steps and browser tested in)
  1.Navigated to an event details page.
  2.Verified that the EventDetailsSkeleton correctly displays a loading state (gray pulsing animation) while the content is being fetched, preventing layout shift.
  3.Confirmed the main content renders correctly once the data is loaded.
  4.Tested in Chrome browser.

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have updated the documentation accordingly
• My changes generate no new warnings or console errors
• Any dependent changes have been merged and published in downstream modules

Summary by CodeRabbit

• New Features
  • Added animated loading skeleton for event details pages, providing a smooth placeholder UI while content loads.

[vercel]

@mithaliphadtare is attempting to deploy a commit to the niharika-mente's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

A new EventDetailsSkeleton React component is added in components/EventDetailsSkeleton.tsx. It renders a pulse-animated placeholder UI matching the event details page layout, with header, banner, overview, three detail rows, and a sidebar block.

Changes

Event Details Skeleton Loader

Layer / File(s)	Summary
EventDetailsSkeleton animated placeholder component components/EventDetailsSkeleton.tsx	Adds a default-exported component that returns a animate-pulse skeleton layout with placeholder blocks for the header, main banner/overview section, a mapped list of three detail rows, and a right-side sidebar.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change—adding a skeleton loader component to the event page.
Description check	✅ Passed	The description covers the main objective, includes issue reference (#38), indicates type of change, and provides testing details, though some checklist items remain unchecked.
Linked Issues check	✅ Passed	The PR successfully implements the skeleton loader component requested in issue #38, displaying a pulsing placeholder during data fetching to prevent layout shifts.
Out of Scope Changes check	✅ Passed	The PR contains only the EventDetailsSkeleton component addition, which directly addresses the requirements in issue #38 with no extraneous changes.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

components/EventDetailsSkeleton.tsx (1)

4-4: 🧹 Nitpick | 🔵 Trivial | ⚡ Quick win

Add loading semantics to the skeleton container.

On Line 4, add ARIA loading semantics so assistive technologies handle this state predictably (for example role="status" with an accessible label, or aria-hidden="true" if loading is announced elsewhere).

Suggested diff

-    <div className="animate-pulse p-6 space-y-8">
+    <div
+      className="animate-pulse p-6 space-y-8"
+      role="status"
+      aria-live="polite"
+      aria-label="Loading event details"
+    >

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@components/EventDetailsSkeleton.tsx` at line 4, The skeleton container div
with className="animate-pulse p-6 space-y-8" lacks ARIA attributes to
communicate the loading state to assistive technologies. Add either
role="status" with an appropriate aria-label describing the loading state (such
as "Loading event details"), or add aria-hidden="true" if the loading state is
announced elsewhere in the application. This ensures screen reader users are
properly informed about the skeleton loading state.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@components/EventDetailsSkeleton.tsx`:
- Line 4: The skeleton container div with className="animate-pulse p-6
space-y-8" lacks ARIA attributes to communicate the loading state to assistive
technologies. Add either role="status" with an appropriate aria-label describing
the loading state (such as "Loading event details"), or add aria-hidden="true"
if the loading state is announced elsewhere in the application. This ensures
screen reader users are properly informed about the skeleton loading state.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 4fcdc0b5-3803-4ef2-aaa7-7c7fcd04d277

📥 Commits

Reviewing files that changed from the base of the PR and between 352b809 and 9de1474.

📒 Files selected for processing (1)

• components/EventDetailsSkeleton.tsx