Loading & States components
7 Loading & States components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: DataState, ErrorPage, Progress, RouteProgress, Spinner, EmptyState, WsStatus.
- DataStateOne wrapper for the states of a data view, in a fixed order of loading, signed out, service unavailable, error with retry, empty with an action, then the content.
- ErrorPageFull-page states for 404, 500, offline, maintenance, no access, unknown workspace and a module that is coming soon, with sensible actions, an error ID to quote and English and Arabic copy.
- ProgressProgress bar for work under way (with an indeterminate state and tones) and Meter for a quantity against a limit that turns warning and danger past thresholds. Wraps Base UI Progress and Meter.
- RouteProgressA thin progress bar along the top edge for navigation and background jobs. It creeps while work runs, jumps to full when it ends, and a hook counts overlapping jobs.
- SpinnerSmall rotating loader icon for inline pending work; decorative, stops under reduced motion.
- EmptyStateEmpty, error and loading states for a region (dashed frame with icon, title, description and actions; skeleton rows), plus the Skeleton primitive.
- WsStatusA realtime connection indicator showing live with latency, connecting, reconnecting with a countdown to the next try, and offline, as a pill, bare text or a banner with Retry now.