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
36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import { ListDetailSkeleton } from '@/components/SkeletonLoader'
|
|
import { ArrowLeft } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
|
|
export default function Loading() {
|
|
return (
|
|
<main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-6xl">
|
|
{/* Header Skeleton */}
|
|
<div className="mb-6 sm:mb-8">
|
|
<Link
|
|
href="/"
|
|
className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-4 transition-colors tap-target-sm text-sm sm:text-base"
|
|
>
|
|
<ArrowLeft size={20} className="flex-shrink-0" />
|
|
<span>Back to Lists</span>
|
|
</Link>
|
|
|
|
<div className="flex items-center gap-2 sm:gap-3 mb-2">
|
|
<div className="w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-gray-200 animate-pulse" />
|
|
<div className="h-8 sm:h-10 w-48 bg-gray-200 rounded animate-pulse" />
|
|
</div>
|
|
|
|
<div className="h-5 w-32 bg-gray-200 rounded animate-pulse" />
|
|
</div>
|
|
|
|
{/* Inline Item Creation Skeleton */}
|
|
<div className="mb-6 sm:mb-8">
|
|
<div className="h-14 bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg animate-pulse" />
|
|
</div>
|
|
|
|
{/* Items List Skeleton */}
|
|
<ListDetailSkeleton />
|
|
</main>
|
|
)
|
|
}
|