Fix hydration error in ListDetailView permission section

- Add mounted state to prevent SSR/client mismatch
- Permission badge and share button only render after mount
- Resolves hydration error on list detail page
This commit is contained in:
2025-12-03 01:10:43 +00:00
parent 3c95561d4e
commit 2cf1dc9ed2

View File

@@ -66,11 +66,16 @@ export default function ListDetailView({
ownerEmail = '',
collaborators = []
}: ListDetailViewProps) {
const [mounted, setMounted] = useState(false)
const [searchResults, setSearchResults] = useState<ItemWithList[]>([])
const [isSearching, setIsSearching] = useState(false)
const [filteredItems, setFilteredItems] = useState<Item[]>(initialItems)
const [isShareModalOpen, setIsShareModalOpen] = useState(false)
useEffect(() => {
setMounted(true)
}, [])
// Use scroll position preservation hook
useScrollPosition({ key: `list-${listId}` })
@@ -157,7 +162,7 @@ export default function ListDetailView({
return (
<div className="space-y-6">
{/* Permission Badge and Share Button */}
{(permission || canShare) && (
{mounted && (permission || canShare) && (
<div className="flex items-center gap-2">
{permission && <PermissionBadge permission={permission} />}
{canShare && (