Loading States
Source: packages/shared/components/ui/loading-spinner.tsx
import { LoadingSpinner, LoadingState, ErrorState,} from "@prosper/shared/components/ui/loading-spinner";LoadingSpinner
A CSS-only border-spinning indicator.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | Spinner diameter |
className | string | "" | Additional classes |
Size Map
| Size | Dimensions | Border |
|---|---|---|
sm | w-4 h-4 (16px) | border-2 |
md | w-8 h-8 (32px) | border-2 |
lg | w-12 h-12 (48px) | border-3 |
Styling
- Track:
border-gray-300 - Active arc:
border-t-gray-900 - Animation:
animate-spin - Includes
sr-only“Loading…” text for accessibility
<LoadingSpinner /><LoadingSpinner size="sm" /><LoadingSpinner size="lg" />LoadingState
A centered layout combining LoadingSpinner with a text message.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
message | string | "Loading..." | Text shown below spinner |
<LoadingState /><LoadingState message="Fetching opportunities..." />Usage — Job Board
if (loading) return <LoadingState message="Loading opportunities..." />;ErrorState
A centered layout with an error icon, message, and optional retry button.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
message | string | "Something went wrong. Please try again." | Error text |
onRetry | () => void | — | If provided, renders a “Try Again” button |
<ErrorState /><ErrorState message="Failed to load opportunities." onRetry={() => fetchOpportunities()}/>Usage — Job Board
if (error) return <ErrorState message={error} onRetry={fetchOpportunities} />;