From 8432eb1cc05f2e36d561d1628ef68c79e3feee0b Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Wed, 3 Dec 2025 01:31:16 +0000
Subject: [PATCH] Add error and loading pages, remove experimental SSR

---
 app/error.tsx   | 44 ++++++++++++--------------------------------
 app/loading.tsx | 31 +++++++++++--------------------
 next.config.js  |  3 ---
 3 files changed, 23 insertions(+), 55 deletions(-)

diff --git a/app/error.tsx b/app/error.tsx
index a4906a4..95c1e58 100644
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -1,8 +1,5 @@
 'use client'
 
-import { useEffect } from 'react'
-import { AlertTriangle } from 'lucide-react'
-
 export default function Error({
   error,
   reset,
@@ -10,37 +7,20 @@ export default function Error({
   error: Error & { digest?: string }
   reset: () => void
 }) {
-  useEffect(() => {
-    console.error('Page error:', error)
-  }, [error])
-
   return (
-    <div className="min-h-screen flex items-center justify-center p-4 bg-gray-50">
-      <div className="max-w-md w-full bg-white rounded-lg shadow-lg p-6 sm:p-8">
-        <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">
-          <AlertTriangle className="w-6 h-6 sm:w-8 sm:h-8 text-red-600" />
-        </div>
-        <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.'}
+    <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-md p-6">
+        <h2 className="text-xl font-semibold text-gray-900 mb-4">Something went wrong!</h2>
+        <p className="text-gray-600 mb-4">
+          There was an error loading this page. Please try again.
         </p>
-        <div className="flex flex-col sm:flex-row gap-3">
-          <button
-            onClick={reset}
-            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
-          </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>
+        <button
+          onClick={reset}
+          className="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors"
+        >
+          Try again
+        </button>
       </div>
     </div>
   )
-}
+}
\ No newline at end of file
diff --git a/app/loading.tsx b/app/loading.tsx
index d276757..6f41504 100644
--- a/app/loading.tsx
+++ b/app/loading.tsx
@@ -1,24 +1,15 @@
-import { ListCardSkeleton } from '@/components/SkeletonLoader'
-
 export default function Loading() {
   return (
-    <main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-7xl">
-      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6 sm:mb-8">
-        <div className="h-10 w-48 bg-gray-200 rounded animate-pulse" />
-        <div className="h-12 w-32 bg-gray-200 rounded-lg animate-pulse" />
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="animate-pulse space-y-4 w-full max-w-4xl mx-auto px-4">
+        <div className="h-8 bg-gray-200 rounded w-1/4"></div>
+        <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>
-
-      {/* 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>
+    </div>
   )
-}
+}
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
index f41d225..a54e766 100644
--- a/next.config.js
+++ b/next.config.js
@@ -9,9 +9,6 @@ const nextConfig = {
   productionBrowserSourceMaps: false,
   trailingSlash: false,
   poweredByHeader: false,
-  experimental: {
-    ssr: false,
-  },
 }
 
 module.exports = nextConfig
\ No newline at end of file