Create Reusable Loading and Error State Components

[aji70]

Task: Create Reusable Loading and Error State Components

Overview

Every data-driven page needs consistent loading spinners, skeleton placeholders, and error retry UI. Build shared primitives now so feature pages stay thin later.

---

Goals

• LoadingSpinner — inline and full-page variants
• PageSkeleton — generic skeleton for dashboard cards
• ErrorState — message + optional retry button
• EmptyState — illustration/icon + title + CTA slot
• Use Tailwind animations already in the project

---

Deliverables

• components/ui/loading-spinner.tsx
• components/ui/page-skeleton.tsx
• components/ui/error-state.tsx
• components/ui/empty-state.tsx
• Example usage in dashboard/page.tsx (toggle via query flag or mock)

---

Acceptance Criteria

• Components accept className for layout flexibility
• Error state supports onRetry callback prop
• Skeleton matches approximate dashboard card dimensions
• All components render without client-only hooks unless necessary
• Documented in a short comment block or README section

[Cjay-Cyber-2]

i would love to work on this

[Menjay7]

Hi! I came across this issue and would love to work on it. I have experience with similar tasks and I'm confident I can investigate, implement a clean solution, and thoroughly test it before submitting a PR. If the issue is still open, I would appreciate it if you could assign it to me. Thank you!

[chriz-cloud]

hello maintainer, i am a full stack developer and will love to work on this issue

[grantfox-oss]

🦊 GrantFox — @chriz-cloud has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #10)
2. Your PR will be reviewed by the MyFanss maintainers

Good luck! Track your progress on GrantFox.