Fix hydration error in OfflineIndicator component

- Add mounted state to prevent SSR/client mismatch
- Component now only renders after client-side mount
- Resolves React hydration error
This commit is contained in:
2025-12-02 14:22:34 +00:00
parent ade7ad19d6
commit 78901c8e2e

View File

@@ -1,5 +1,6 @@
'use client' 'use client'
import { useState, useEffect } from 'react'
import { useOfflineSync } from '@/hooks' import { useOfflineSync } from '@/hooks'
import { WifiOff, Wifi, RefreshCw, AlertCircle } from 'lucide-react' import { WifiOff, Wifi, RefreshCw, AlertCircle } from 'lucide-react'
@@ -9,8 +10,18 @@ import { WifiOff, Wifi, RefreshCw, AlertCircle } from 'lucide-react'
* Validates: Requirements 4.5 * Validates: Requirements 4.5
*/ */
export default function OfflineIndicator() { export default function OfflineIndicator() {
const [mounted, setMounted] = useState(false)
const { isOnline, isSyncing, syncError, queueLength, triggerSync } = useOfflineSync() const { isOnline, isSyncing, syncError, queueLength, triggerSync } = useOfflineSync()
useEffect(() => {
setMounted(true)
}, [])
// Don't render on server to avoid hydration mismatch
if (!mounted) {
return null
}
// Don't show anything if online and no pending syncs // Don't show anything if online and no pending syncs
if (isOnline && queueLength === 0 && !syncError) { if (isOnline && queueLength === 0 && !syncError) {
return null return null