// app/dashboard/loading.tsx
export default function Loading() {
  return <div className="animate-pulse h-8 bg-gray-200 rounded" />
}

const [loading, setLoading] = useState(true)
// set loading to false after data fetch completes

if (loading) return <div className="animate-pulse h-8 bg-gray-200 rounded" />

'use client'
export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>Something went wrong.</p>
      <button onClick={reset}>Try again</button>
    </div>
  )
}

import { ErrorBoundary } from 'react-error-boundary'

function FallbackUI({ resetErrorBoundary }: { resetErrorBoundary: () => void }) {
  return (
    <div>
      <p>Something went wrong.</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}

// Wrap your routes:
// <ErrorBoundary FallbackComponent={FallbackUI}><YourRoute /></ErrorBoundary>

export const metadata = { title: 'Page Title | App Name' }