Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Spinner in List Item
A React spinner integrated into list item showing loading state with title and description using shadcn/ui Item and muted-foreground styling
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Loading individual list items silently confuses users about what's happening. This React pattern integrates Spinner with shadcn/ui Item component showing Loading user profile title and Please wait description. Built with muted-foreground spinner and ItemContent structure, it's perfect for progressive list rendering, lazy-loaded feeds, async data fetching, partial content updates, or any list where items load individually and users need clear context about what's loading without disrupting the list layout.
Please wait while we fetch your data
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Inline with Text
Standard inline spinner with text
Spinner Before Text
Spinner in leading position
Spinner After Text
Spinner in trailing position
Spinner in Card
Card with loading spinner
Basic Spinner
Standalone spinner component
Skeleton Loader
Alternative loading placeholder