AI Code Toolkit

/** * {{ pageTitle }} Loading * * DESIGN PATTERNS: * - Suspense Boundary: Automatically wraps page in Suspense * - Progressive Loading: Shows while route segment loads * * CODING STANDARDS: * - Use Server Components by default * - Keep loading UI simple and lightweight * - Match the layout of the actual page for better UX * * USAGE: * - Automatically shown during route transitions * - Rendered while async Server Components fetch data * - Can use skeleton loaders or spinners */ export default function Loading() { return ( <div className="flex items-center justify-center min-h-screen"> <div className="text-center"> <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"></div> <p className="mt-4 text-gray-600">Loading...</p> </div> </div> ); }