Overview
FullPageLoader displays a centered branded spinner with a random quote during app shell loading. Use ONLY in layout Suspense fallbacks - never for data loading.
Key Features
- Large branded spinner (96px) for high visibility
- Random quote from curated collection for user delight
- Designed for layout-level Suspense only
Examples
Live Preview
The loader displays a centered spinner with a random quote. Refresh to see different quotes.
Loading...
Good things come to those who wait...
When to Use
Correct Usage
- Layout Suspense fallbacks (e.g., src/app/[locale]/layout.tsx)
- Auth page boundaries (login, signup)
Never Use For
- Data loading (use block isLoading props instead)
- Page components (blocks have built-in loading)
- Conditional rendering based on loading state
Usage
import { Suspense } from 'react';
import { FullPageLoader } from '@/ui/components';
// In a layout.tsx file - the ONLY correct usage
export default function MyLayout({ children }) {
return (
<Suspense fallback={<FullPageLoader />}>
<LayoutInner>{children}</LayoutInner>
</Suspense>
);
}
// ❌ WRONG - Never use for data loading
{isLoading ? <FullPageLoader /> : <Content />}
// ❌ WRONG - Never use in page components
export default function MyPage() {
return <FullPageLoader />; // Wrong!
}