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:
@@ -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 && (
|
||||
|
||||
Reference in New Issue
Block a user