Add error and loading pages, remove experimental SSR
This commit is contained in:
@@ -1,8 +1,5 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { useEffect } from 'react'
|
|
||||||
import { AlertTriangle } from 'lucide-react'
|
|
||||||
|
|
||||||
export default function Error({
|
export default function Error({
|
||||||
error,
|
error,
|
||||||
reset,
|
reset,
|
||||||
@@ -10,36 +7,19 @@ export default function Error({
|
|||||||
error: Error & { digest?: string }
|
error: Error & { digest?: string }
|
||||||
reset: () => void
|
reset: () => void
|
||||||
}) {
|
}) {
|
||||||
useEffect(() => {
|
|
||||||
console.error('Page error:', error)
|
|
||||||
}, [error])
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex items-center justify-center p-4 bg-gray-50">
|
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||||
<div className="max-w-md w-full bg-white rounded-lg shadow-lg p-6 sm:p-8">
|
<div className="max-w-md w-full bg-white rounded-lg shadow-md p-6">
|
||||||
<div className="flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 bg-red-100 rounded-full mx-auto mb-4">
|
<h2 className="text-xl font-semibold text-gray-900 mb-4">Something went wrong!</h2>
|
||||||
<AlertTriangle className="w-6 h-6 sm:w-8 sm:h-8 text-red-600" />
|
<p className="text-gray-600 mb-4">
|
||||||
</div>
|
There was an error loading this page. Please try again.
|
||||||
<h2 className="text-xl sm:text-2xl font-bold text-gray-900 text-center mb-2">
|
|
||||||
Something went wrong
|
|
||||||
</h2>
|
|
||||||
<p className="text-sm sm:text-base text-gray-600 text-center mb-6">
|
|
||||||
{error.message || 'We encountered an unexpected error. Please try again.'}
|
|
||||||
</p>
|
</p>
|
||||||
<div className="flex flex-col sm:flex-row gap-3">
|
<button
|
||||||
<button
|
onClick={reset}
|
||||||
onClick={reset}
|
className="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors"
|
||||||
className="flex-1 px-4 py-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors font-medium text-sm sm:text-base tap-target"
|
>
|
||||||
>
|
Try again
|
||||||
Try Again
|
</button>
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => window.location.href = '/'}
|
|
||||||
className="flex-1 px-4 py-3 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 rounded-lg transition-colors font-medium text-sm sm:text-base tap-target"
|
|
||||||
>
|
|
||||||
Go Home
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,24 +1,15 @@
|
|||||||
import { ListCardSkeleton } from '@/components/SkeletonLoader'
|
|
||||||
|
|
||||||
export default function Loading() {
|
export default function Loading() {
|
||||||
return (
|
return (
|
||||||
<main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-7xl">
|
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6 sm:mb-8">
|
<div className="animate-pulse space-y-4 w-full max-w-4xl mx-auto px-4">
|
||||||
<div className="h-10 w-48 bg-gray-200 rounded animate-pulse" />
|
<div className="h-8 bg-gray-200 rounded w-1/4"></div>
|
||||||
<div className="h-12 w-32 bg-gray-200 rounded-lg animate-pulse" />
|
<div className="h-10 bg-gray-200 rounded"></div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="h-16 bg-gray-200 rounded"></div>
|
||||||
|
<div className="h-16 bg-gray-200 rounded"></div>
|
||||||
|
<div className="h-16 bg-gray-200 rounded"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</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>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -9,9 +9,6 @@ const nextConfig = {
|
|||||||
productionBrowserSourceMaps: false,
|
productionBrowserSourceMaps: false,
|
||||||
trailingSlash: false,
|
trailingSlash: false,
|
||||||
poweredByHeader: false,
|
poweredByHeader: false,
|
||||||
experimental: {
|
|
||||||
ssr: false,
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = nextConfig
|
module.exports = nextConfig
|
||||||
Reference in New Issue
Block a user