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