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
25 lines
891 B
TypeScript
25 lines
891 B
TypeScript
import { ListCardSkeleton } from '@/components/SkeletonLoader'
|
|
|
|
export default function Loading() {
|
|
return (
|
|
<main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-7xl">
|
|
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6 sm:mb-8">
|
|
<div className="h-10 w-48 bg-gray-200 rounded animate-pulse" />
|
|
<div className="h-12 w-32 bg-gray-200 rounded-lg animate-pulse" />
|
|
</div>
|
|
|
|
{/* Global Search Skeleton */}
|
|
<div className="mb-6 sm:mb-8">
|
|
<div className="h-12 bg-gray-100 border border-gray-300 rounded-lg animate-pulse" />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
|
|
<ListCardSkeleton />
|
|
<ListCardSkeleton />
|
|
<ListCardSkeleton />
|
|
<ListCardSkeleton />
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|