Add client-side wrapper for ListDetailView to fix hydration

2025-12-03 01:17:25 +00:00
parent ea8e770c57
commit 68164ba1df
2 changed files with 19 additions and 1 deletions
--- a/components/ClientListDetailView.tsx
+++ 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