Loader

'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 (
    <div>
      <Button onClick={() => setIsLoading(true)}>Show Loader</Button>
      <Loader isVisible={isLoading} label="Loading content, please wait..." />
    </div>
  );
}

Installation

npmpnpmyarnbun
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/loader.json
Copy

Usage

Copy'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 (
    <>
      <Button onClick={handleLoadData}>Load Data</Button>
      <Loader isVisible={isLoading} label="Loading your data..." />
    </>
  );
}

API Reference

Loader

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)