loading, error और not-found Pages

// app/blog/page.jsx — simulate a slow database
async function getPosts() {
  await new Promise((r) => setTimeout(r, 2000))   // 2 seconds
  return [{ slug: 'hello', title: 'Hello Next.js' }]
}

export default async function Blog() {
  const posts = await getPosts()
  return posts.map((p) => <h2 key={p.slug}>{p.title}</h2>)
}

// app/blog/loading.jsx
export default function Loading() {
  return (
    <div className="container" aria-busy="true">
      {[1, 2, 3].map((i) => (
        <div key={i} className="skeleton-card">
          <div className="sk sk-title" />
          <div className="sk sk-line" />
          <div className="sk sk-line short" />
        </div>
      ))}
    </div>
  )
}

/* globals.css */
.sk { background: linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);
      background-size: 200% 100%; animation: shine 1.2s infinite; border-radius: 8px; }
.sk-title { height: 22px; width: 60%; margin-bottom: 10px; }
.sk-line  { height: 12px; margin-bottom: 8px; }
.sk-line.short { width: 40%; }
@keyframes shine { to { background-position: -200% 0; } }

// app/page.jsx — hero appears instantly, reviews stream in later
import { Suspense } from 'react'

async function Reviews() {
  const res = await fetch('https://api.example.com/reviews')   // slow
  const reviews = await res.json()
  return <ul>{reviews.map((r) => <li key={r.id}>⭐ {r.text}</li>)}</ul>
}

export default function Home() {
  return (
    <main>
      <h1>Learn coding with EduSite</h1>          {/* instant */}
      <Suspense fallback={<p>Loading reviews…</p>}>
        <Reviews />                               {/* streams later */}
      </Suspense>
    </main>
  )
}

// app/error.jsx  (from the EduSite project)
'use client' // error boundaries must be Client Components

export default function Error({ error, reset }) {
  return (
    <div className="container section" style={{ textAlign: 'center' }}>
      <h1>Something went wrong</h1>
      <p className="lead">Please try again. If the problem continues, contact us.</p>
      <button className="btn" onClick={() => reset()}>Try again</button>
    </div>
  )
}

// app/global-error.jsx — catches errors in the ROOT layout itself
'use client'
export default function GlobalError({ reset }) {
  return (
    <html><body>
      <h1>Site is temporarily unavailable</h1>
      <button onClick={() => reset()}>Reload</button>
    </body></html>
  )
}

// app/not-found.jsx  (from the EduSite project)
import Link from 'next/link'

export default function NotFound() {
  return (
    <div className="container section" style={{ textAlign: 'center' }}>
      <h1>404 – Page not found</h1>
      <p className="lead">The page you are looking for does not exist or has moved.</p>
      <Link href="/" className="btn">Go to home page</Link>
    </div>
  )
}
// Shown for unknown URLs AND whenever you call notFound()

<Layout>
  <ErrorBoundary fallback={<Error />}>          ← error.jsx
    <Suspense fallback={<Loading />}>          ← loading.jsx
      <ErrorBoundary fallback={<NotFound />}>   ← not-found.jsx
        <Page />                                ← page.jsx
      </ErrorBoundary>
    </Suspense>
  </ErrorBoundary>
</Layout>