Merge pull request #17 from cristofima/dev - fix(frontend/compare): wrap useSearchParams in Suspense boundary for Next.js 16 compatibility

- Extracted main page logic into ComparePageContent component that uses useSearchParams
- Added ComparePageSkeleton fallback component with loading spinner
- Wrapped content in Suspense boundary in the default export ComparePage

Author: cristofima

frontend/app/compare/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, Suspense } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 import { listJobs, getJobDetails, JobDetails } from '@/lib/api';
@@ -45,7 +45,25 @@ function getBestValue(jobs: JobDetails[], metricKey: MetricKey): number | undefi
   return Math.max(...values);
 }
 
-export default function ComparePage() {
+// Loading component for Suspense fallback
+function ComparePageSkeleton() {
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-zinc-900 transition-colors">
+      <Header title="Compare Models" showBackToUpload />
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white dark:bg-zinc-800 rounded-lg shadow dark:shadow-zinc-900/50 p-6 mb-6 transition-colors">
+          <div className="text-center py-12">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 dark:border-indigo-400 mx-auto mb-4"></div>
+            <p className="text-gray-600 dark:text-gray-400">Loading jobs for comparison...</p>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+// Main compare page content (uses useSearchParams)
+function ComparePageContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
 
@@ -156,8 +174,9 @@ export default function ComparePage() {
           </div>
 
           {isLoading ? (
-            <div className="flex items-center justify-center py-8">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600 dark:border-indigo-400"></div>
+            <div className="text-center py-12">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 dark:border-indigo-400 mx-auto mb-4"></div>
+              <p className="text-gray-600 dark:text-gray-400">Loading jobs for comparison...</p>
             </div>
           ) : allJobs.length === 0 ? (
             <div className="text-center py-8">
@@ -373,3 +392,12 @@ export default function ComparePage() {
     </div>
   );
 }
+
+// Wrap with Suspense to handle useSearchParams() in Next.js 16 client components
+export default function ComparePage() {
+  return (
+    <Suspense fallback={<ComparePageSkeleton />}>
+      <ComparePageContent />
+    </Suspense>
+  );
+}