Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Spinner in Empty State
A React full-page loading state with spinner title description and cancel button using Empty component built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Blank screens during processing panic users who think the app crashed. This React empty state shows Spinner in EmptyMedia with Processing your request title, Do not refresh warning, and Cancel button. Built with shadcn/ui Empty component with icon variant and proper structure, it's perfect for async operations, payment processing, file generation, batch operations, or any long-running task requiring full-screen loading state where users need reassurance work is progressing not stalled.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Spinner in Item
Progress item with spinner
Spinner in Input
Input with processing spinner
Basic Spinner
Standalone spinner component
Empty State
Empty state without spinner
Button with Spinner
Loading button state
Loading Card
Card loading state
Questions you might have
React Spinner in Input Group
React input and textarea with spinner showing validation or processing states using disabled inputs built with shadcn/ui InputGroup
React Spinner - Loading Button
A React button showing loading state with spinner and Loading text using disabled prop built with shadcn/ui Button component