Loading state design
How Meridian handles loading states across the dashboard — skeleton screens, streaming, and optimistic UI.
Skeleton screens
Every data-driven surface ships with a matching skeleton. The skeleton mirrors the layout's bounding boxes using animate-pulse and our violet-to-pink gradient. No layout shift on hydration.
Streaming with Suspense
Server components stream HTML as it resolves. Each async boundary wraps in Suspense with a lightweight fallback. Users see the shell instantly; content fills in progressively.
Optimistic updates
Mutations reflect immediately in the UI before the server confirms. On failure, we roll back and surface a toast. This keeps the dashboard feeling instant even under latency.
Empty and error states
Every loading path has a terminal state. Empty states show a branded illustration with a CTA. Errors show the problem and a retry link — never a blank screen.