Fix SyncIndicator hydration error

- Add mounted state to prevent SSR/client mismatch
- Component only renders after client-side mount
- Fixes hydration error with timestamp display
This commit is contained in:
2025-12-03 00:39:53 +00:00
parent 72f98c783a
commit 865c2a85de

View File

@@ -7,10 +7,17 @@ import { RefreshCw } from 'lucide-react'
* Visual indicator that shows when the page is syncing * Visual indicator that shows when the page is syncing
*/ */
export default function SyncIndicator() { export default function SyncIndicator() {
const [mounted, setMounted] = useState(false)
const [isSyncing, setIsSyncing] = useState(false) const [isSyncing, setIsSyncing] = useState(false)
const [lastSync, setLastSync] = useState<Date>(new Date()) const [lastSync, setLastSync] = useState<Date>(new Date())
useEffect(() => { useEffect(() => {
setMounted(true)
}, [])
useEffect(() => {
if (!mounted) return
// Listen for router refresh events // Listen for router refresh events
const handleSync = () => { const handleSync = () => {
setIsSyncing(true) setIsSyncing(true)
@@ -34,7 +41,12 @@ export default function SyncIndicator() {
document.removeEventListener('visibilitychange', handleVisibilityChange) document.removeEventListener('visibilitychange', handleVisibilityChange)
clearInterval(interval) clearInterval(interval)
} }
}, []) }, [mounted])
// Don't render on server to avoid hydration mismatch
if (!mounted) {
return null
}
return ( return (
<div className="fixed top-4 right-4 z-50 flex items-center gap-2 px-3 py-2 bg-white border border-gray-200 rounded-lg shadow-sm text-xs text-gray-600"> <div className="fixed top-4 right-4 z-50 flex items-center gap-2 px-3 py-2 bg-white border border-gray-200 rounded-lg shadow-sm text-xs text-gray-600">