From 68164ba1dfca4a71d3907adfc6c64f7d81f76157 Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Wed, 3 Dec 2025 01:17:25 +0000
Subject: [PATCH] Add client-side wrapper for ListDetailView to fix hydration

---
 app/list/[id]/page.tsx              |  2 +-
 components/ClientListDetailView.tsx | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 components/ClientListDetailView.tsx

diff --git a/app/list/[id]/page.tsx b/app/list/[id]/page.tsx
index 73020cd..969d03d 100644
--- a/app/list/[id]/page.tsx
+++ b/app/list/[id]/page.tsx
@@ -6,7 +6,7 @@ import { notFound } from 'next/navigation'
 import Link from 'next/link'
 import { ArrowLeft } from 'lucide-react'
 import InlineItemCreate from '@/components/InlineItemCreate'
-import ListDetailView from '@/components/ListDetailView'
+import ListDetailView from '@/components/ClientListDetailView'
 
 export const dynamic = 'force-dynamic'
 export const revalidate = 0
diff --git a/components/ClientListDetailView.tsx b/components/ClientListDetailView.tsx
new file mode 100644
index 0000000..11a4dce
--- /dev/null
+++ b/components/ClientListDetailView.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+
+const ListDetailView = dynamic(() => import('./ListDetailView'), {
+  ssr: false,
+  loading: () => <div className="animate-pulse space-y-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>
+})
+
+export default ListDetailView
\ No newline at end of file