# 🌀 Feature Request: Add Loading Spinners or Skeleton UIs During Data Fetch

## Summary

Improve user experience during data fetch operations by displaying a loading spinner or skeleton screen, instead of a blank or frozen UI. This will help indicate that data is being loaded, especially in slower network conditions.

---

## 📌 Why is this needed?

Currently, when data such as event details, time slots, or comments are loading, users may see a blank or suddenly updating interface. This can lead to confusion or frustration. Displaying a visual cue like a spinner or skeleton improves the perceived speed and usability of the platform.

---

## ✅ Acceptance Criteria

- [ ] Show a loading spinner or skeleton loader when:
- Event details are loading
- Comments are being fetched
- Time slots and vote data are loading
- [x] Use a consistent style across all loaders
- [ ] Ensure loaders match the current UI design and theme
- [ ] Avoid layout shift by keeping the loader height/width similar to actual content
- [ ] Loader disappears smoothly once data is rendered

---

## 🛠 Suggested Implementation

- **Frontend (HTML/CSS/JavaScript)**:
- Introduce a `loading` state in relevant components.
- Use CSS animations for spinners or skeletons.
- Optionally use:
- Pure CSS loaders (e.g., [SpinKit](https://tobiasahlin.com/spinkit/))
- Lightweight JS skeleton libraries

- **File/Component Targets**:
- Event display page
- Comment section
- Time slot voting area

---

## 📚 Resources

- [SpinKit CSS Loaders](https://tobiasahlin.com/spinkit/)
- [Skeleton Loading UI Design](https://uxdesign.cc/skeleton-screens-a-better-loading-experience-899c92f6fd5e)
- [react-loading-skeleton (if using React)](https://github.com/dvtng/react-loading-skeleton)

---

## 🏷 Labels

`frontend` `UX` `good first issue` `enhancement` `help wa