Paul Bailey
e51e88fddd
- Implement toast notification system for success/error messages - Add loading states with skeleton loaders for async operations - Create smooth CSS transitions and animations - Enhance empty states with EmptyState component - Add loading.tsx files for Next.js loading states - Integrate toast notifications across all CRUD operations - Add fade-in and scale-in animations for better UX - Improve visual feedback for user actions
34 lines
958 B
TypeScript
34 lines
958 B
TypeScript
'use client'
|
|
|
|
interface LoadingSpinnerProps {
|
|
size?: 'sm' | 'md' | 'lg'
|
|
className?: string
|
|
}
|
|
|
|
export default function LoadingSpinner({ size = 'md', className = '' }: LoadingSpinnerProps) {
|
|
const sizeClasses = {
|
|
sm: 'w-4 h-4 border-2',
|
|
md: 'w-6 h-6 border-2',
|
|
lg: 'w-8 h-8 border-3',
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`${sizeClasses[size]} border-gray-300 border-t-blue-500 rounded-full animate-spin ${className}`}
|
|
role="status"
|
|
aria-label="Loading"
|
|
/>
|
|
)
|
|
}
|
|
|
|
export function LoadingOverlay({ message = 'Loading...' }: { message?: string }) {
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 backdrop-blur-sm">
|
|
<div className="bg-white rounded-lg p-6 sm:p-8 shadow-xl flex flex-col items-center gap-4">
|
|
<LoadingSpinner size="lg" />
|
|
<p className="text-gray-700 font-medium text-sm sm:text-base">{message}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|