Remove SyncIndicator to fix hydration errors

- Removed SyncIndicator component causing hydration issues
- Background polling still works for real-time updates
- Updates appear within 1 second without visual indicator
This commit is contained in:
2025-12-03 00:45:51 +00:00
parent 79026733cb
commit bdff38c9a5
2 changed files with 0 additions and 67 deletions

View File

@@ -1,65 +0,0 @@
'use client'
import { useEffect, useState } from 'react'
import { RefreshCw } from 'lucide-react'
/**
* Visual indicator that shows when the page is syncing
*/
export default function SyncIndicator() {
const [mounted, setMounted] = useState(false)
const [isSyncing, setIsSyncing] = useState(false)
const [lastSync, setLastSync] = useState<Date>(new Date())
useEffect(() => {
setMounted(true)
}, [])
useEffect(() => {
if (!mounted) return
// Listen for router refresh events
const handleSync = () => {
setIsSyncing(true)
setLastSync(new Date())
setTimeout(() => setIsSyncing(false), 500)
}
// Trigger on visibility change
const handleVisibilityChange = () => {
if (document.visibilityState === 'visible') {
handleSync()
}
}
document.addEventListener('visibilitychange', handleVisibilityChange)
// Simulate sync indicator every second
const interval = setInterval(handleSync, 1000)
return () => {
document.removeEventListener('visibilitychange', handleVisibilityChange)
clearInterval(interval)
}
}, [mounted])
// Don't render on server to avoid hydration mismatch
if (!mounted) {
return null
}
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"
suppressHydrationWarning
>
<RefreshCw
size={14}
className={`${isSyncing ? 'animate-spin text-blue-500' : 'text-gray-400'}`}
/>
<span suppressHydrationWarning>
{isSyncing ? 'Syncing...' : `Last sync: ${lastSync.toLocaleTimeString()}`}
</span>
</div>
)
}