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