Skip to content

feat: added new components#37

Merged
aji70 merged 2 commits into
MyFanss:mainfrom
chriz-cloud:feat/reusable-loading-error-state-components
Jun 21, 2026
Merged

feat: added new components#37
aji70 merged 2 commits into
MyFanss:mainfrom
chriz-cloud:feat/reusable-loading-error-state-components

Conversation

@chriz-cloud

Copy link
Copy Markdown
Contributor

Summary

  • Add LoadingSpinner with inline and full-page variants (3 sizes)
  • Add PageSkeleton shimmer placeholder matching dashboard card dimensions
  • Add ErrorState with title, message, and optional onRetry callback
  • Add EmptyState with swappable icon, description, and CTA slot
  • Wire all four states into dashboard/page.tsx behind ?ui= query flags for preview

Components

Component Path
LoadingSpinner src/components/ui/loading-spinner.tsx
PageSkeleton src/components/ui/page-skeleton.tsx
ErrorState src/components/ui/error-state.tsx
EmptyState src/components/ui/empty-state.tsx

How to preview

Start the dev server and navigate to /dashboard with one of the following query params:

Param State shown
?ui=loading PageSkeleton
?ui=loading-page LoadingSpinner full-page overlay
?ui=error ErrorState
?ui=empty EmptyState with CTA button
(none) Normal dashboard

Notes

  • All components accept className for layout flexibility
  • ErrorState.onRetry is optional — the retry button only renders when provided
  • Components are server-renderable (no client-only hooks)
  • Follows existing CVA + cn() + lucide-react conventions

closes #10

@aji70

aji70 commented Jun 21, 2026

Copy link
Copy Markdown
Contributor

@chriz-cloud resolve conflicts

@aji70 aji70 merged commit 8b89318 into MyFanss:main Jun 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create Reusable Loading and Error State Components

2 participants