e19f3a3db7
- Created ButtonLoading component for consistent loading button pattern - Created comprehensive loading states pattern guide - Documented best practices for loading states in async operations - Identified and documented existing loading state implementations - Provided patterns for form submissions, data fetching, mutations, and skeleton loaders - Created checklist for implementing loading states - Documented examples from existing codebase Most components already have loading states implemented. Pattern guide ensures consistency for future implementations.
37 lines
856 B
TypeScript
37 lines
856 B
TypeScript
import { Button, ButtonProps } from './button';
|
|
import { Loader2 } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
// FE-COMP-001: Add loading states to all async operations
|
|
|
|
interface ButtonLoadingProps extends ButtonProps {
|
|
isLoading?: boolean;
|
|
loadingText?: string;
|
|
}
|
|
|
|
/**
|
|
* Button component with built-in loading state
|
|
* Automatically disables the button and shows a spinner when loading
|
|
*/
|
|
export function ButtonLoading({
|
|
isLoading = false,
|
|
loadingText,
|
|
children,
|
|
disabled,
|
|
className,
|
|
...props
|
|
}: ButtonLoadingProps) {
|
|
return (
|
|
<Button
|
|
disabled={disabled || isLoading}
|
|
className={cn(className)}
|
|
{...props}
|
|
>
|
|
{isLoading && (
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
|
|
)}
|
|
{isLoading && loadingText ? loadingText : children}
|
|
</Button>
|
|
);
|
|
}
|
|
|