---
title: Loader
description: A fullscreen loading indicator with animated wave effect and custom label, displayed on a backdrop overlay
---
```tsx
'use client';
import { useState } from 'react';
import { Button } from '@/ui/buttons/Button';
import { Loader } from '@/ui/Loader';
export function LoaderDemo() {
const [isLoading, setIsLoading] = useState(false);
return (
);
}
```
## Installation
Using the CLI:
```bash
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/loader.json
```
Or manually, copy the following code into `/ui/loader.tsx`:
```tsx
'use client';
import clsx from 'clsx';
import { useEffect, type ComponentProps, type FunctionComponent } from 'react';
import { useTransitionState } from 'react-transition-state';
import { Backdrop } from './Backdrop';
export interface LoaderProps {
isVisible?: boolean;
label?: string;
portalId?: ComponentProps['target'];
}
const loaderSVG = (
);
export const Loader: FunctionComponent = ({ isVisible, label, portalId }) => {
const [{ status, isMounted }, toggle] = useTransitionState({
timeout: { enter: 250, exit: 250 },
mountOnEnter: true,
unmountOnExit: true,
preEnter: true,
});
useEffect(() => {
toggle(isVisible);
}, [isVisible, toggle]);
const entering = status === 'preEnter' || status === 'entering';
const exiting = status === 'exiting';
return (
{isMounted && (
{loaderSVG}
{label}
)}
);
};
```
## Usage
```tsx showLineNumbers
'use client';
import { useState } from 'react';
import { Loader } from '@/docs/lib/ui/loader';
import { Button } from '@/docs/lib/ui/Button';
export function Component() {
const [isLoading, setIsLoading] = useState(false);
const handleLoadData = async () => {
setIsLoading(true);
// Simulate async operation
await fetch('/api/data');
setIsLoading(false);
};
return (
<>
);
}
```
## API Reference
### Loader
| Prop | Type | Default | Description |
| ----------- | --------- | ----------- | ------------------------------------------------- |
| `isVisible` | `boolean` | `undefined` | Controls the visibility of the loader |
| `label` | `string` | `undefined` | Optional text message displayed below the spinner |
## Notes
- **Fullscreen Overlay**: Renders on a `Backdrop` component that covers the entire viewport with a sweep animation
- **Animated Wave Effect**: Features a custom SVG animation with an animated wave using CSS keyframes
- **Transition States**: Uses `react-transition-state` for smooth enter/exit animations with slide effects
- **Accessibility**: Includes `role="alert"` for screen reader announcements when loading begins
- **Portal Rendering**: Rendered in a portal through the Backdrop component for proper z-index layering
- **Unmount on Exit**: Automatically unmounts from the DOM when hidden to improve performance
- **Custom Label**: Supports optional text to inform users about the loading process
- **Client Component**: Must be used in client components (requires "use client" directive)